jerome-react-modal

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:

Prop	Type	Default	Description
isOpen	boolean	false	Determines whether the modal is displayed or hidden.
contentBody	string or JSX.Element	null	The content to be displayed inside the modal. This can be a string or a JSX element.
onClose	function	null	A callback function that is executed when the modal is closed. This function should set isOpen to false.
closeButton	JSX.Element	null	An optional JSX element that is displayed as the close button. If not provided, the default "Close" text is displayed.
contentHeader	JSX.Element	null	An optional JSX element that is displayed as the modal header.
contentFooter	JSX.Element	null	An optional JSX element that is displayed as the modal footer.
background	string	rgba(0, 0, 0, 0.75)	An optional parameter to set the background color behind the modal.
modalAlign	"top" or "middle" or "bottom" or "baseline" or "sub" or "text-top"	"middle"	An optional parameter to set the vertical alignment of the modal.
modalRadius	string	"8px"	An optional parameter to set the border radius of the modal.
modalBackground	string	"#FFF"	An optional parameter to set the CSS background property of the modal.
modalShadow	string	"0 0 10px #000"	An optional parameter to set the CSS box-shadow property of the modal.
modalMinWidth	string	null	An optional parameter to set the min-width property of the modal.

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); }}
      />