simply-modale v0.1.5
simply-modale is a library of React components created using create-react-app
.
Installation
npm install simply-modale
How to use
Simply import the Modal component into the file you want to use the modal
import { Modal } from simply-modale
The modal functionality is handled by the local state of the modal's parent. Therefore, the parent component requires state. I have used modaleIsOpen and setModaleIsOpen as variable names, but you can call them whatever you like.
const [modalIsOpen, setModalIsOpen] = useState(false)
The initial state should be set to false.
An action at the parent component's level allows to change the state to true.
const handleSubmit = ( => {
setModalIsOpen(true)
}
The "closeModal" prop receives the close modal function as value. This enables the modal to be closed on button click .
"closeModal" is required.
const closeModal = () => {
setModalIsOpen(false)
}
The "title" prop receives the "title" variable as its value. This allows you to write the text you want to see in the modal.
"title" is required.
const title = "the text of the modal"
to apply the css style of your text, use the ".textModal" class.
Example
.textModal {
fontsize: 12px;
color: red;
}
Example of use
import { Modal } from 'simply-modale'
const Example = () => {
const [modalIsOpen, setModalIsOpen] = useState(false)
const submit = () => {
setModalIsOpen(true)
}
const closeModal = () => {
setModalIsOpen(false)
}
const title = " my modal text "
return (
<div>
<form>
...........
<form/>
{modalIsOpen && <Modal closeModal={closeModal} title={title} />}
<div>
)
}