@andoniaina/react-modal 1.1.6 → 1.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +111 -19
  2. package/package.json +62 -62
package/README.md CHANGED
@@ -1,49 +1,141 @@
1
- # @andoniaina/react-modal
1
+ # 📦 React Simple Modal
2
2
 
3
- Un composant **Modal React simple, léger et accessible**, prêt à l’emploi, avec gestion du scroll, fermeture par clic extérieur et touche ESC.
4
-
5
- Idéal pour afficher des messages de succès, d’erreur ou des confirmations dans vos applications React.
3
+ Un composant **Modal React simple, léger et réutilisable**, sans dépendances externes, idéal pour afficher des messages de confirmation ou d’information.
6
4
 
7
5
  ---
8
6
 
9
7
  ## ✨ Fonctionnalités
10
8
 
11
- - ✅ Modal contrôlée (`isOpen`)
12
- - ✅ Fermeture par clic sur l’overlay
13
- - ✅ Fermeture avec la touche **ESC**
14
- - ✅ Blocage du scroll en arrière-plan
15
- - ✅ Styles CSS inclus
16
- - ✅ Types de modal (`success`, `error`)
17
- - ✅ Accessible (`role="dialog"`, `aria-modal`)
9
+ * 📌 Facile à intégrer
10
+ * ⚛️ Compatible React 18+
11
+ * 🎨 Style personnalisable via CSS
12
+ * ♻️ Réutilisable
13
+ * 🚫 Aucune dépendance externe
18
14
 
19
15
  ---
20
16
 
21
- ## 📦 Installation
17
+ ## 📥 Installation
18
+
19
+ Installe le package via **npm** :
22
20
 
23
21
  ```bash
24
22
  npm install @andoniaina/react-modal
23
+ ```
24
+
25
+ ou avec **yarn** :
26
+
27
+ ```bash
28
+ yarn add @andoniaina/react-modal
29
+ ```
30
+
31
+ ---
32
+
33
+ ## 🚀 Utilisation
34
+
35
+ ### 1️⃣ Import du composant
25
36
 
26
- ## Utilisation basique
37
+ ```js
38
+ import { Modal } from "@andoniaina/react-modal";
39
+ import "@andoniaina/react-modal/Modal.css";
40
+ ```
41
+
42
+ ---
43
+
44
+ ### 2️⃣ Exemple simple
45
+
46
+ ```jsx
27
47
  import { useState } from "react";
28
48
  import { Modal } from "@andoniaina/react-modal";
49
+ import "@andoniaina/react-modal/Modal.css";
29
50
 
30
51
  function App() {
31
52
  const [isOpen, setIsOpen] = useState(false);
32
53
 
33
54
  return (
34
- <>
55
+ <div>
35
56
  <button onClick={() => setIsOpen(true)}>
36
- Ouvrir la modal
57
+ Ouvrir le modal
37
58
  </button>
38
59
 
39
60
  <Modal
40
61
  isOpen={isOpen}
41
62
  onClose={() => setIsOpen(false)}
42
- type="success"
43
- message="L’opération a été effectuée avec succès !"
44
- />
45
- </>
63
+ title="Succès"
64
+ >
65
+ <p>L'employé a été créé avec succès.</p>
66
+ </Modal>
67
+ </div>
46
68
  );
47
69
  }
48
70
 
49
71
  export default App;
72
+ ```
73
+
74
+ ---
75
+
76
+ ## 🧩 Props disponibles
77
+
78
+ | Prop | Type | Description |
79
+ | ---------- | ----------- | ------------------------------- |
80
+ | `isOpen` | `boolean` | Ouvre ou ferme le modal |
81
+ | `onClose` | `function` | Fonction appelée à la fermeture |
82
+ | `title` | `string` | Titre du modal |
83
+ | `children` | `ReactNode` | Contenu du modal |
84
+
85
+ ---
86
+
87
+ ## 🎨 Personnalisation du style
88
+
89
+ Le composant inclut un fichier CSS par défaut :
90
+
91
+ ```js
92
+ import "@andoniaina/react-modal/Modal.css";
93
+ ```
94
+
95
+ Tu peux :
96
+
97
+ * modifier ce fichier
98
+ * ou surcharger les classes CSS dans ton projet
99
+
100
+ ---
101
+
102
+ ## 🛠️ Cas d’usage courant
103
+
104
+ * Confirmation de création
105
+ * Message de succès
106
+ * Message d’erreur
107
+ * Information utilisateur
108
+
109
+ ---
110
+
111
+ ## 📁 Structure du projet
112
+
113
+ ```bash
114
+ react-simple-modal/
115
+ ├── src/
116
+ │ ├── Modal.jsx
117
+ │ ├── Modal.css
118
+ │ └── index.js
119
+ ├── package.json
120
+ ├── README.md
121
+ └── LICENSE
122
+ ```
123
+
124
+ ---
125
+
126
+ ## 🧪 Compatibilité
127
+
128
+ * React 18+
129
+ * Fonctionne avec Vite, CRA, Next.js
130
+
131
+ ---
132
+
133
+ ## 📄 Licence
134
+
135
+ MIT © Andoniaina
136
+
137
+ ---
138
+
139
+ ## 🎓 Contexte pédagogique
140
+
141
+ Ce package a été développé dans le cadre du **projet HRnet (OpenClassrooms)**, visant à convertir une application jQuery vers React.
package/package.json CHANGED
@@ -1,62 +1,62 @@
1
- {
2
- "name": "@andoniaina/react-modal",
3
- "version": "1.1.6",
4
- "description": "Reusable, accessible and customizable React modal component",
5
- "type": "module",
6
- "main": "dist/index.cjs.js",
7
- "module": "dist/index.es.js",
8
- "files": [
9
- "dist"
10
- ],
11
- "sideEffects": [
12
- "*.css"
13
- ],
14
- "exports": {
15
- ".": {
16
- "import": "./dist/index.es.js",
17
- "require": "./dist/index.cjs.js"
18
- },
19
- "./Modal.css": "./dist/react-modal.css"
20
- },
21
- "scripts": {
22
- "dev": "vite",
23
- "build": "vite build",
24
- "lint": "eslint .",
25
- "preview": "vite preview"
26
- },
27
- "keywords": [
28
- "react",
29
- "modal",
30
- "dialog",
31
- "accessible",
32
- "ui",
33
- "component"
34
- ],
35
- "author": "Andoniaina",
36
- "license": "MIT",
37
- "repository": {
38
- "type": "git",
39
- "url": "https://github.com/andoniaina/react-modal"
40
- },
41
- "bugs": {
42
- "url": "https://github.com/andoniaina/react-modal/issues"
43
- },
44
- "homepage": "https://github.com/andoniaina/react-modal#readme",
45
- "peerDependencies": {
46
- "react": ">=18",
47
- "react-dom": ">=18"
48
- },
49
- "devDependencies": {
50
- "@eslint/js": "^9.39.1",
51
- "@types/react": "^19.2.5",
52
- "@types/react-dom": "^19.2.3",
53
- "@vitejs/plugin-react": "^5.1.1",
54
- "eslint": "^9.39.1",
55
- "eslint-plugin-react-hooks": "^7.0.1",
56
- "eslint-plugin-react-refresh": "^0.4.24",
57
- "globals": "^16.5.0",
58
- "react": ">=18",
59
- "react-dom": ">=18",
60
- "vite": "^7.2.4"
61
- }
62
- }
1
+ {
2
+ "name": "@andoniaina/react-modal",
3
+ "version": "1.1.8",
4
+ "description": "Reusable, accessible and customizable React modal component",
5
+ "type": "module",
6
+ "main": "dist/index.cjs.js",
7
+ "module": "dist/index.es.js",
8
+ "files": [
9
+ "dist"
10
+ ],
11
+ "sideEffects": [
12
+ "*.css"
13
+ ],
14
+ "exports": {
15
+ ".": {
16
+ "import": "./dist/index.es.js",
17
+ "require": "./dist/index.cjs.js"
18
+ },
19
+ "./Modal.css": "./dist/react-modal.css"
20
+ },
21
+ "scripts": {
22
+ "dev": "vite",
23
+ "build": "vite build",
24
+ "lint": "eslint .",
25
+ "preview": "vite preview"
26
+ },
27
+ "keywords": [
28
+ "react",
29
+ "modal",
30
+ "dialog",
31
+ "accessible",
32
+ "ui",
33
+ "component"
34
+ ],
35
+ "author": "Andoniaina",
36
+ "license": "MIT",
37
+ "repository": {
38
+ "type": "git",
39
+ "url": "https://github.com/andoniaina/react-modal"
40
+ },
41
+ "bugs": {
42
+ "url": "https://github.com/andoniaina/react-modal/issues"
43
+ },
44
+ "homepage": "https://github.com/andoniaina/react-modal#readme",
45
+ "peerDependencies": {
46
+ "react": ">=18",
47
+ "react-dom": ">=18"
48
+ },
49
+ "devDependencies": {
50
+ "@eslint/js": "^9.39.1",
51
+ "@types/react": "^19.2.5",
52
+ "@types/react-dom": "^19.2.3",
53
+ "@vitejs/plugin-react": "^5.1.1",
54
+ "eslint": "^9.39.1",
55
+ "eslint-plugin-react-hooks": "^7.0.1",
56
+ "eslint-plugin-react-refresh": "^0.4.24",
57
+ "globals": "^16.5.0",
58
+ "react": ">=18",
59
+ "react-dom": ">=18",
60
+ "vite": "^7.2.4"
61
+ }
62
+ }