Licence
ISC
Version
0.1.8
Deps
0
Size
50.9 MB
Vulns
0
Weekly
0
Getting Started
Ce package vous permet de créer une modale d'une manière simple. Vous pouvez la personnaliser en ajoutant de l'animation et vos propres couleurs.
Les 3 types de modal
Utilisation du composant Modal
//Importer le composant Modal
import Modal from "react-personalizable-modal-by-fatma/src/Modal"
//Dans la partie déclaration
const [isOpen,setIsOpen]=useState(false);
//Dans la partie return
<Modal isOpen = {isOpen} setIsOpen={setIsOpen}
type="ERROR"
icone={true}
titre="Titre"
texte="Texte souhaité!"
animation = {true} animationFrom={"LEFT"}
/>
//Au clic sur le bouton
<button onClick={()=>{setIsOpen(true);}}>Ouvrir modal</button>Les props du composant Modal
| Propriété | Valeur | Description |
|---|---|---|
| type | ERROR/SUCCESS | Sin on ne met rien , la modale aura une couleur par défaut et l'icone sera affichée |
| isAnimated | true/false | |
| animationFrom | TOP, BOTTOM, RIGHT,LEFT | La valeur par défaut est TOP |
| bgColor | blue/red/#000… | Permet de changer la couleur du background du header et du bouton. |
| containerStyle | exemple : containerStyle={{width: '400px',height :'100px'}} | |
| textStyle | exemple : textStyle={{fontSize: '20px',text-align:'center'}} | |
| title | string | |
| text | string |