0.1.0 • Published 2 years ago
react-modal-vpdi v0.1.0
React modal
This modal is designed to be modular and work inside a React project.
What does the modal look like
Installation
Install the modal in your project:
npm install react-modal-vpdi
Usage
Make the modal work properly by setting its local state and adding the function that changes its state. Follow the example below to learn how to embed the modal in your component:
// Import the modal into your component
import Modal from "react-modal-vpdi";
const MyComponent = () => {
// Defines the opening state of the modal
const [modalIsOpen, setModalIsOpen] = useState(true);
// Add a function that will be used to close the modal when you click on the "close" button
const closeModal = () => {
setModalIsOpen(false);
};
// Add the modal in the "return" of your component, and give the values to its props
return (
<Modal
modalState={modalIsOpen} // Current state of the modal
setModalState={closeModal} // Event that closes the modal
text="I am a modal!" // Text to display inside the modal
/>
);
};
Props used :
Props | Type | Description |
---|---|---|
modalState | boolean | Open or close the modal |
setModalState | function | Modifies the opening or closing of the modal |
text | string | Text displayed in the modal |
Example
If you want to embed the modal in a form, see the example below:
// We add a modal that launches when the form is submitted :
// Import the modal into your component
import Modal from "react-modal-vpdi";
const MyForm = () => {
// We start by setting the state of the modal to "false" in order to close it.
const [modalIsOpen, setModalIsOpen] = useState(false);
// In the form submit function, we change the state of the modal to "true" so that it opens when the form is submitted
const submitForm = () => {
setModalIsOpen(true);
};
// We add a function that will close the modal when we click on the "close" button
const closeModal = () => {
setModalIsOpen(false);
};
// We add the modal in the "return" of our component, and we give the values to its props
return (
<Modal
modalState={modalIsOpen} // Current state of the modal
setModalState={closeModal} // Event that closes the modal
text="Form sent!" // Text to display inside the modal
/>
);
};
Modal Styles
The modal is styled with css.
License
0.1.0
2 years ago