React-modal-context

Description

React component that allows iterating multiple modals using context to handle the display :

• To add another modal, create a new component like <CustomModalTwo/>.
• Wrap each modal component with his own <ModalContextProvider>.
• This ensures that each modal has his own isolated context.

Install

npm i @samuelprigent/react-modal-context

Example

In your App.jsx file

import { useContext } from "react";
import {
  ModalContextProvider,
  ModalVersion,
  ModalContext,
} from "@samuelprigent/react-modal-context";

const App = () => {
  const CustomModal = () => {
    const { toggleShow } = useContext(ModalContext);

    // == Your modal here
    const modalContent = (
      <>
        <h2>Modal title</h2>
        <p>Description of the modal</p>
        <div onClick={toggleShow} className="closeButton">
          Close
        </div>
      </>
    );

    // == Your trigger here
    return (
      <>
        <button onClick={toggleShow} className="button-style">
          Show modal
        </button>
        <ModalVersion modalContent={modalContent} />
      </>
    );
  };

  return (
    <ModalContextProvider>
      <CustomModal />
    </ModalContextProvider>
  );
};

License

MIT © samuelprigent