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 booleanet 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/>

julien-easy-modal