julien-easy-modal
julien-easy-modal est un composant REACT. Ce composant est uniquement utilisable sur une stack reactJS.
Install
$ npm i julien-easy-modal
Import
import Modal from "julien-easy-modal";
utilisation
Pour ouvrir ou fermer la modal, il faut lui passer un state de type boolean
et son setteur dans les props isOpen
et setIsOpen
Defaut
const [isOpen, setIsOpen] = useState(false)
...
<Modal setIsOpen={setIsOpen} isOpen={isOpen}>
<p>Texte personalisé<p>
<button className="close-modal" onClick={()=>{setIsOpen(false)}}>fermer</button>
<Modal/>
Close texte
<Modal isOpen={isOpen} setIsOpen={setIsOpen}>
<p onClick={()=>setIsOpen(false)}>Fermer la modal<p>
<button className="close-modal" onClick={()=>{setIsOpen(false)}}>fermer</button>
<Modal/>
Remove closing cross
<Modal isOpen={isOpen} setIsOpen={setIsOpen} closingCross={false}>
<p>Texte personalisé<p>
<button className="close-modal" onClick={()=>{setIsOpen(false)}}>fermer</button>
<Modal/>
Edit closing button
<Modal isOpen={isOpen} setIsOpen={setIsOpen} editClose="!">
<p>Texte personalisé<p>
<button className="close-modal" onClick={()=>{setIsOpen(false)}}>fermer</button>
<Modal/>
fadeDuration and fadeDelay
<Modal setIsOpen={setIsOpen} isOpen={isOpen} fadeDuration={500} fadeDelay={10}>
<p>Texte personalisé<p>
<button className="close-modal" onClick={()=>{setIsOpen(false)}}>fermer</button>
<Modal/>