A simple modal component for React application.
You can see npm publication here
You can install react_modal_library with npm command :
npm install react_modal_library
or with yarn command :
yarn add react_modal_library
-
Import Modal component to your file :
import { Modal } from 'react_modal_library'
-
Insert Modal component at rendering (example) :
import { Modal } from 'react_modal_library';
const Form = () => {
const [ isOpen, setIsOpen ] = useState(false);
const openModal = () => setIsOpen(true);
const closeModal = () => setIsOpen(false);
const handleSubmit = (e) => {
e.preventDefault();
openModal();
};
return (
<div className='Form'>
<form method='post'>
<div>
<label htmlFor='firstName'>First Name</label>
<input aria-required="true" type='text' id='firstName' name='firstName' onChange={(e) => setFirstname(e.target.value)} required value={firstname} />
</div>
</form>
<button type='submit' id='saveButton' onClick={(e) => handleSubmit(e)}>Save</button>
{isOpen && <Modal text='Employee created' close={closeModal} />}
</div>
);
}
export default Form;
- Pass props
text
andclose
to Modal component.
-
text
contains text to display in Modal component -
close
contains function that returns false