a modal component for React application
You can see details of modal on NPM : here
On your terminal :
npm install library-modal
- You must import package :
import { Modal } from 'library-modal'
- How insert modal component at rendering (is an example) :
import { Modal } from 'library-modal'
const Form = () => {
const [firstname, setFirstname] = useState("")
const [show, setShow] = useState(false)
const [created, setCreated] = useState(false)
const submitCreateEmployee = (e) => {
if (!firstname) {
setCreated(false)
setShow(true)
} else {
setCreated(true)
setShow(true)
}
};
const hide = () => {
setShow(false)
};
return (
<div className='Form'>
<form action="" className='formulaire' name='form'>
<label htmlFor="firstName">First Name</label>
<input onChange={(e) => setFirstname(e.target.value)} type="text" id="firstName" required />
</form>
<button onClick={submitCreateEmployee} className='button-save'>Save</button>
{show && !created && <Modal contentModal="You must complete all the fields!" hide={hide} />}
{show && created && <Modal contentModal="Employee Created!" hide={hide} />}
</div>
)
};
export default Form;
You have to pass props contentModal
and hide
to component
-
contentModal
: text to display on modal -
hide
: function called onClick update setShow on false