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

Click Outside to Close - React Hook (React-Modal)

pra's play answered on May 24, 2024 Popularity 3/10 Helpfulness 2/10

answer Click Outside to Close - React Hook (React-Modal)

Click Outside to Close - React Hook (React-Modal)

Comment

import { useRef } from "react";
import { FaRegWindowClose } from "react-icons/fa";
import "./Modal.css"; // Ensure to create a separate CSS file for custom styling

export default function Modal({ children, title, isOpen, onClose }) {
  const modalRef = useRef(null);

  const handleClickOutside = (event) => {
    if (!modalRef.current.contains(event.target)) {
      onClose();
    }
  };

  if (!isOpen) return null;

  return (
    <div onClick={handleClickOutside} className="modal-overlay">
      <div ref={modalRef} className="modal-container">
        <div className="modal-header">
          <h5 className="modal-title">{title}</h5>
          <FaRegWindowClose
            onClick={onClose}
            size={24}
            className="modal-close-icon"
          />
        </div>
        <hr />
        <div className="modal-content">{children}</div>
      </div>
    </div>
  );
}

Test.jsx

const [isOpen, setIsOpen] = useState(false);

const openModal = () => setIsOpen(true);
const closeModal = () => setIsOpen(false);

{/* Contact Us button */}
<Link
  to="#"
  className="fixed bottom-5 right-5"
  onClick={openModal}
>
  <Button onClick={() => {}}/>
</Link>

{/* Contact Modal */}
<Modal title="Contact" isOpen={isOpen} onClose={closeModal}>
  {/* Modal content */}
</Modal>

//css
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background-color: rgba(128, 128, 128, 0.75);
  padding: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

Popularity 3/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: click hook javascript

Link to this answer
Share Copy Link

Contributed on May 24 2024

pra's play

0 Answers Avg Quality 2/10

Click Outside to Close - React Hook (React-Modal)

Contents

More Related Answers

Click Outside to Close - React Hook (React-Modal)

Grepper

Documentation

Social

Legal

Contact

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