React Modal Component
Presentation
Customizable modal component for React JS
Install the modal
Use NPM command:
npm i @fabiendev/react-modal-component
Import modal in your project
import ReactModalComponent from "@fabiendev/react-modal-component";
Example in component
import { useState } from "react";
import ReactModalComponent from "@fabiendev/react-modal-component";
const ModalExample = () => {
const [displayModal, setDisplayModal] = useState(false);
const toggleModal = () => setDisplayModal(!displayModal);
return (
<div>
<h2>Modal Example</h2>
<button onClick={toggleModal}>Open Modale</button>
{displayModal &&
<ReactModalComponent
hideModal={toggleModal}
title="Modal Title"
darkMode
modalSize="large"
>
<p>Message in modal</p>
</ReactModalComponent>
}
</div>
);
};
export default ModalExample;
Properties
Properties | Types | Required |
---|---|---|
hideModal |
function | X |
title |
string | |
children |
node | X |
darkMode |
bool | |
modalSize |
string | |
customModalWidth |
string | |
customModalHeight |
string | |
modalTextColor |
string | |
closeBtnContainerColor |
string |
Properties description
-
hideModal
{function}: Function to hide modal- example:
hideModal={toggleModal}
- example:
-
title
{string}: Title of modal- example:
title="Modal Title"
- example:
-
children
{node}: Content to display inside modal- example:
<ReactModalComponent> <p>Message in modal</p> </ReactModalComponent>
- example:
-
darkMode
{bool}: Whether to display modal in dark mode- example:
darkMode={true}
- example:
-
modalSize
{string}: Predefined size of modal ("large", "medium", "small")- example:
modalSize="large"
- example:
-
customModalWidth
{string}: Custom width for modal- example:
customModalWidth="500px"
- example:
-
customModalHeight
{string}: Custom height for modal- example:
customModalHeight="500px"
- example:
-
modalTextColor
{string}: Text color for modal- example:
modalTextColor="#93AD18"
- example:
-
closeBtnContainerColor
{string}: Background color for close button- example:
closeBtnContainerColor="#748813"
- example: