Reusable, accessible and customizable React modal component
npm install @andoniaina/react-modalUn composant Modal React simple, lĂ©ger et rĂ©utilisable, sans dĂ©pendances externes, idĂ©al pour afficher des messages de confirmation ou dâinformation.
---
* đ Facile Ă intĂ©grer
* âïž Compatible React 18+
* đš Style personnalisable via CSS
* â»ïž RĂ©utilisable
* đ« Aucune dĂ©pendance externe
---
Installe le package via npm :
``bash`
npm install @andoniaina/react-modal
ou avec yarn :
`bash`
yarn add @andoniaina/react-modal
---
`js`
import { Modal } from "@andoniaina/react-modal";
import "@andoniaina/react-modal/Modal.css";
---
`jsx
import { useState } from "react";
import { Modal } from "@andoniaina/react-modal";
import "@andoniaina/react-modal/Modal.css";
function App() {
const [isOpen, setIsOpen] = useState(false);
return (
onClose={() => setIsOpen(false)}
title="SuccĂšs"
>
L'employé a été créé avec succÚs.
export default App;
`
---
| Prop | Type | Description |
| ---------- | ----------- | ------------------------------- |
| isOpen | boolean | Ouvre ou ferme le modal |onClose
| | function | Fonction appelée à la fermeture |title
| | string | Titre du modal |children
| | ReactNode | Contenu du modal |
---
Le composant inclut un fichier CSS par défaut :
`js`
import "@andoniaina/react-modal/Modal.css";
Tu peux :
* modifier ce fichier
* ou surcharger les classes CSS dans ton projet
---
* Confirmation de création
* Message de succĂšs
* Message dâerreur
* Information utilisateur
---
`bash``
react-simple-modal/
âââ src/
â âââ Modal.jsx
â âââ Modal.css
â âââ index.js
âââ package.json
âââ README.md
âââ LICENSE
---
* React 18+
* Fonctionne avec Vite, CRA, Next.js
* Node > 20
---
MIT © Andoniaina
---
Ce package a été développé dans le cadre du projet HRnet (OpenClassrooms), visant à convertir une application jQuery vers React.