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

react function component modal

Shehroz Ali answered on February 18, 2023 Popularity 9/10 Helpfulness 3/10

answer react function component modal

related modal component in react js

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 javascript

Link to this answer
Share Copy Link

Contributed on Feb 18 2023

Shehroz Ali

0 Answers Avg Quality 2/10

Closely Related Answers

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 8/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jan 19 2024

WinMaw

0 Answers Avg Quality 2/10

react function component modal

Contents

More Related Answers

react function component modal

Closely Related Answers

modal component in react js

Grepper

Documentation

Social

Legal

Contact

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