jerome-react-modal v1.0.5

React Modal Component

A customizable and reusable React modal component with several options for displaying content and styling. The modal has been thoroughly tested manually and with Jest tests, achieving great coverage. Therefore, it is considered stable.

Installation

You can install the Modal Component package from npm:

npm install jerome-react-modal

Usage

Import the Modal Component in your React project:

import { Modal } from "jerome-react-modal";

Add the Modal Component to your component's render method:

<Modal isOpen={modalOpen}
       contentBody={<div>This is the modal body</div>}
       onClose={() => { setModalOpen(false); }}
/>

Props

The Modal Component accepts the following props:

Examples

Basic example

const [modalOpen, setModalOpen] = useState(true);

<Modal isOpen={modalOpen}
       contentBody={"This is a text"}
       onClose={() => { setModalOpen(false); }}
/>

Customized example

const [modalOpen, setModalOpen] = useState(true);

  <Modal isOpen={modalOpen}
        contentHeader={<div className="modal-line">Modal Title</div>}
        contentBody={<div className="modal-line">This is a Body</div>}
        contentFooter={<div className="modal-line">This is a footer</div>}
        modalAlign="top"
        backgroundColor="rgba(200, 200, 200, 0.5)"
        modalBackground="grey"
        modalShadow="0 0 15px grey"
        modalMinWidth="190px"
        modalRadius="300px"
        onClose={() => { setModalOpen(false); }}
      />