A simple React modal component.
npm install react-modal-mcThis is a modal component for React. Developped for a student project and used in [P14-hrnet]
-Matthieu CARON
- Node.js (Version 18.12.1)
- NPM
- (Recommended IDE) VSCode
- react
- react-dom
- Installation
- Usage
- Props
You can install the react-modal-mc package using npm:
``bash`
npm i react-modal-mcUsage
Import ReactModal in your React component:
`jsx`
import ReactModal from "react-modal-mc";
Implement ReactModal in your React component:
`jsx
const App = () => {
const [isModalOpen, setModalOpen] = useState(false);
const handleOpenModal = () => {
setModalOpen(true);
};
const handleCloseModal = () => {
setModalOpen(false);
};
return (
export default App;
`
You can also display Modal without an Opening button, this an exemple with a confirmed Form :
`jsx
const FormWithModal = () => {
const [isModalOpen, setModalOpen] = useState(false);
const handleSubmit = (event) => {
event.preventDefault();
// Perform form submission logic here
setModalOpen(true);
};
const handleCloseModal = () => {
setModalOpen(false);
};
return (
Your form has been successfully submitted.
export default FormWithModal;
`
The ReactModal` component props you need:
| Prop | Type | Description | Default Value |
| ---- | ---- | ----------- | ------------- |
| isOpen | boolean |Determines if the modal is open or closed |false |
| onClose| function |Function to call when the modal is closed |undefined |
|title| string| Title of the modal| '' |
| message | string |Message to display in the modal |'' |
| children | node |Custom content to display in the modal |null |
| modalBackground | string| Background color of the modal| #fff|
| closeButtonBackground | string |Background color of the close button |#000 |
| closeButtonHoverBackground | string |Background color of the close button on hover |#ff0000 |