Breaking News: Grepper is joining You.com. Read the official announcement!

modal component in react js

Add Answer

WinMaw answered on January 31, 2022 Popularity 9/10 Helpfulness 1/10

answer modal component in react js

related what is the modal in react.js

related react function component modal

related modal in react

modal component in react js

Comment

import React, { useEffect, useState } from "react";
import { IoCloseOutline, IoCloseSharp } from "react-icons/io5";
import './Modal.css'

const Modal = ({ isOpen, onClose, title, children, width }) => {
  const [additionalClasses, setAdditionalClasses] = useState('');

    useEffect(() => {
        // Apply or remove overflow: hidden when the modal opens or closes
        document.body.style.overflow = isOpen ? 'hidden' : 'auto';
    
        // Clean up the effect when the component unmounts or the modal is closed
        return () => {
          document.body.style.overflow = 'auto';
        };
      }, [isOpen]);

      const handleOverlayClick = () => {
        setAdditionalClasses('pluseHeartbeat');

        setTimeout(() => {
          setAdditionalClasses('');
        }, 1000); // Adjust the timeout duration based on your animation duration
      };  

  const modalOverlayClasses = isOpen
    ? `fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity z-50 `
    : "hidden";
  const modalClasses = isOpen
  ? `fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2  flex items-center justify-center z-50 ${width ? `${width}` : 'w-96'} `
  : "hidden";



  return (
    <div className={modalOverlayClasses} onClick={handleOverlayClick} >
      <div className={`${modalClasses}`}>
        <div
          className={`bg-white p-3 rounded-lg shadow-xl mx-auto ${additionalClasses}`}
          onClick={(e) => e.stopPropagation()}
        >
          <div className={`flex flex-col mb-4 `}>
            <div className={`mb-2 flex items-center ${title ? "justify-between" : "justify-end"}`}>
                {title &&               <h2 className="text-lg font-semibold">{title}</h2>
}
              <button
                className="text-foreground/50 hover:text-foreground cursor-pointer"
                onClick={onClose}
              >
                <IoCloseSharp />
              </button>
            </div>
            <div>{children}</div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Modal;

Popularity 9/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: javascript

Link to this answer
Share Copy Link

Contributed on Jan 19 2024

WinMaw

0 Answers Avg Quality 2/10

Closely Related Answers

what is the modal in react.js

Comment

import React, { useState } from 'react';

const Modal = ({ isOpen, onClose }) => {
  if (!isOpen) {
    return null; // Don't render anything if the modal is closed
  }

  return (
    <div className="modal">
      <div className="modal-content">
        <h2>Modal Title</h2>
        <p>Modal content goes here...</p>
        <button onClick={onClose}>Close</button>
      </div>
    </div>
  );
};

const App = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleOpenModal = () => {
    setIsModalOpen(true);
  };

  const handleCloseModal = () => {
    setIsModalOpen(false);
  };

  return (
    <div>
      <button onClick={handleOpenModal}>Open Modal</button>
      <Modal isOpen={isModalOpen} onClose={handleCloseModal} />
    </div>
  );
};

export default App;

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: chat.openai.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jun 17 2023

Shehab Morgan

0 Answers Avg Quality 2/10

react function component modal

Comment

import React, {useState} from 'react';
import Modal from 'react-modal';
import AnimeList from './Anime';


function ModalInFunctionalComponent (){

    const [modalIsOpen,setModalIsOpen] = useState(false);

    const setModalIsOpenToTrue =()=>{
        setModalIsOpen(true)
    }

    const setModalIsOpenToFalse =()=>{
        setModalIsOpen(false)
    }

    return(
        <>
            <button onClick={setModalIsOpenToTrue}>Click to Open Modal</button>

            <Modal isOpen={modalIsOpen}>
                <button onClick={setModalIsOpenToFalse}>x</button>
                <AnimeList/>
            </Modal>
        </>
    )
}
export default ModalInFunctionalComponent;

Popularity 9/10 Helpfulness 3/10 Language javascript

Source: dev.to

Tags: function functio

Link to this answer
Share Copy Link

Contributed on Feb 18 2023

Shehroz Ali

0 Answers Avg Quality 2/10

modal in react

Comment

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width='device-width', initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button onclick="my_dialog.showModal()">Open Dialog</button>

    <dialog id="my_dialog">
        <h1>MY HEADER</h1>
        <div>
            <h5>MY ONE</h5>
            <h5>MOYE MOYE</h5>
        </div>
        <button onclick="my_dialog.close()">Close Dialog</button>
    </dialog>
  </body>
</html>

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Dec 06 2023

Abhishek

0 Answers Avg Quality 2/10

modal in react

Comment

import React from "react";
export default class Modal extends React.Component {
  render() {
    return <div>Hello Modal</div>;
  }
}

Popularity 10/10 Helpfulness 1/10 Language javascript

Source: blog.bitsrc.io

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jan 31 2022

Wide-eyed Wryneck

0 Answers Avg Quality 2/10

modal component in react js

Contents

More Related Answers

modal component in react js

Closely Related Answers

what is the modal in react.js

react function component modal

modal in react

modal in react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.