A React modal component
npm install react-modal-component-tasse2npm i react-modal-component-tasse2
npm install react@^18.2.55 react-dom@^18.2.19 prop-types@^15.8.1
| Propriété | Type | Description |
|-----------|----------|----------------------------------------------|
| isOpen | Boolean | Indique si la modal est ouverte ou fermée |
| onClose | Function | Callback pour fermer la modal |
| children | Node | Contenu à afficher à l'intérieur de la modal |
jsx
onClose={handleClose}
>
Titre de la Modal
Voici le contenu de la modal
`
Exemple d'utilisation dans un composant React :
jsx
import React, { useState } from 'react';
import Modal from 'react-modal-component-tasse2';function App() {
const [isOpen, setIsOpen] = useState(false);
const handleClose = () => setIsOpen(false);
const handleOpen = () => setIsOpen(true);
return (
onClose={handleClose}
>
Titre de la Modal
Voici le contenu de la modal
);
}export default App;
`Vous pouvez remplacer le style par défaut en utilisant la propriété style :
jsx
isOpen={isOpen}
onClose={handleClose}>
Titre de la Modal
Voici le contenu de la modal
` Accessibilité
Le composant modal respecte les meilleures pratiques en matière d'accessibilité, comme le piégeage du focus à l'intérieur de la modal lorsqu'elle est ouverte et le retour du focus à l'élément précédemment focalisé à la fermeture.
De plus, la modal peut être fermée en :
* Cliquant sur le bouton de fermeture de la modal
* Cliquant à l'extérieur de la modal
* Naviguant vers le bouton de fermeture avec la touche Tab, et en appuyant sur la touche Entrée
Dépendances
`json"peerDependencies": {
"react": "^18.2.55",
"react-dom": "^18.2.19",
"prop-types": "^15.8.1"
}
``La section "Licence" indique que le projet est sous licence MIT. Voici ce que cela signifie généralement :
1. Libre utilisation : Vous pouvez utiliser le code pour n'importe quel but.
2. Redistribution : Vous pouvez distribuer le code, que ce soit sous forme binaire ou sous forme de source.
3. Modifications : Vous pouvez modifier le code et distribuer vos versions modifiées.
4. Inclusion de la licence : Vous devez inclure le texte de la licence originale dans toute copie ou distribution substantielle du code.