1.1.3 • Published 3 years ago
react-modal-component-hrnet v1.1.3
react-modal-component-hrnet
A simple modal React component created for the HRnet OpenClassrooms project
Installation
npm install react-modal-component-hrnet
Usage
Inside the component where you want to use the modal, import useState and the modal component with these lines
import { useState } from "react";
import Modal from "react-modal-component-hrnet";
Create a state that will be used to trigger the modal. i.e. :
const [displayModal, setDisplayModal] = useState(false);
Use the state as a condition to the modal's display (if the state is true, then the modal shows up) and add props to the component
The available props are :
- "title" for the modal header,
- "body" for the modal body,
- "showModal" for the state used to display the modal,
- "titleColor" for the title color,
- "headerBackgroundColor" for the header background color,
- "bodyColor" for the title color,
- "bodyBackgroundColor" for the header background color
You can then add the component to your code as follows, i.e :
{displayModal && (
<Modal
title="Employee Created!"
body="New employee created, you may now proceed to the employees list page"
showModal={setDisplayModal}
/>