@cyril/react-modal

A highly customizable and flexible modal component for React applications.

Installation

To install the package, run:

npm install @cyril-vtn/react-modal

Usage

To use the modal component, import it into your React application:

import Modal from "@cyril-vtn/react-modal";

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

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

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

  return (
    <div>
      <button onClick={openModal}>Open Modal</button>
      <Modal
        isOpen={isModalOpen}
        onClose={closeModal}
        overlayColor="rgba(0, 0, 0, 0.5)"
        modalWidth="600px"
        modalHeight="400px"
        modalBackgroundColor="#ffffff"
        closeButtonColor="#000000"
        closeButtonSize="30px"
        closeButtonPosition={{ top: "10px", right: "10px" }}
        showCloseButton={true}
        closeOnEscape={true}
        closeOnOverlayClick={true}
        customStyles={{ borderRadius: "12px" }}
      >
        <h2>Modal Title</h2>
        <p>This is the content of the modal.</p>
      </Modal>
    </div>
  );
};

export default App;

Props

| Prop | Type | Default | Description | | ---------------------- | -------- | ------------------------------ | ------------------------------------------ | | isOpen | boolean | - | Controls the opening/closing of the modal | | onClose | function | - | Function called to close the modal | | children | node | - | Content of the modal | | overlayColor | string | "rgba(0, 0, 0, 0.5)" | Background color of the overlay | | modalWidth | string | "500px" | Modal width | | modalHeight | string | "auto" | Modal height | | modalBackgroundColor | string | "#ffffff" | Background color of the modal | | closeButtonColor | string | "#000000" | Close button color | | closeButtonSize | string | "24px" | Close button size | | closeButtonPosition | object | { top: "10px", right: "10px" } | Close button position | | showCloseButton | boolean | true | Show or hide the close button | | closeOnEscape | boolean | true | Close the modal by pressing the Escape key | | closeOnOverlayClick | boolean | true | Close the modal by clicking on the overlay | | customStyles | object | {} | Custom CSS styles for the modal |

License

MIT © Cyril