arnaudballand-react-modal-library
v1.0.2
Published
A simple and customizable react modal component
Downloads
5
Readme
arnaudballand-react-modal-library
arnaudballand-react-modal-library is a simple and reusable modal component for React
Installation
The package can be installed via npm
npm i arnaudballand-react-modal-library
Configuration
1. import
When you need the modal component, you have to import the component in your file
import { Modal } from 'arnaudballand-react-modal-library'
2. Required props
To run this modal, only two props are required
isModalOpen, // Boolean
setIsModalOpen, // Function to update isModalOpen
Example
Basic example
import React, { useState } from 'react'
import { Modal } from 'arnaudballand-react-modal-library'
const Example = () => {
const [isModalOpen, setIsModalOpen] = useState(false)
return (
<>
<button onClick={() => setIsModalOpen(true)}>Open modal</button>
<Modal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen}>
<h2>Modal test</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</Modal>
</>
)
}
Add className to customize modal with css
<Modal
className="customModal"
isModalOpen={isModalOpen}
setIsModalOpen={setIsModalOpen}
>
...
</Modal>
.customModal .reactModalLib__container {
background-color: #c1121f;
}
License
Licensed under MIT license.