0.8.2 • Published 2 years ago
react_modal_library v0.8.2
React Modal Library
A simple modal component for React application.
NPM publication
You can see npm publication here
Installation
You can install react_modal_library with npm command :
npm install react_modal_library
or with yarn command :
yarn add react_modal_library
Use 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.
Props expected
text
contains text to display in Modal componentclose
contains function that returns false