@andoniaina/react-modal 1.1.5 → 1.1.7

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 +45 -8
  2. package/package.json +62 -61
package/README.md CHANGED
@@ -1,20 +1,28 @@
1
1
  # @andoniaina/react-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.
3
+ Un composant **Modal React simple, léger et accessible**, prêt à l’emploi.
4
+ Il permet d’afficher des messages de succès ou d’erreur avec gestion du scroll, fermeture par clic extérieur et via la touche **ESC**.
4
5
 
5
- Idéal pour afficher des messages de succès, d’erreur ou des confirmations dans vos applications React.
6
+ Idéal pour les applications React modernes.
6
7
 
7
8
  ---
8
9
 
9
10
  ## ✨ Fonctionnalités
10
11
 
11
- - ✅ Modal contrôlée (`isOpen`)
12
+ - ✅ Modal contrôlée via la prop `isOpen`
12
13
  - ✅ Fermeture par clic sur l’overlay
13
- - ✅ Fermeture avec la touche **ESC**
14
- - ✅ Blocage du scroll en arrière-plan
14
+ - ✅ Fermeture avec la touche **ESC** (configurable)
15
+ - ✅ Blocage du scroll du body lorsque le modal est ouvert
15
16
  - ✅ Styles CSS inclus
16
- - ✅ Types de modal (`success`, `error`)
17
- - ✅ Accessible (`role="dialog"`, `aria-modal`)
17
+ - ✅ Types de modal : `success` et `error`
18
+ - ✅ Accessibilité intégrée (`role="dialog"`, `aria-modal`)
19
+
20
+ ---
21
+
22
+ ## ⚙️ Prérequis
23
+
24
+ - **Node.js recommandé** : `>= 18.x`
25
+ - **React** : `>= 17`
18
26
 
19
27
  ---
20
28
 
@@ -23,7 +31,14 @@ Idéal pour afficher des messages de succès, d’erreur ou des confirmations da
23
31
  ```bash
24
32
  npm install @andoniaina/react-modal
25
33
 
26
- ## Utilisation basique
34
+ ---
35
+
36
+ ## Puis importe également le fichier CSS fourni par le package :
37
+
38
+ import "@andoniaina/react-modal/Modal.css";
39
+
40
+
41
+ ## 🚀 Utilisation
27
42
  import { useState } from "react";
28
43
  import { Modal } from "@andoniaina/react-modal";
29
44
 
@@ -46,4 +61,26 @@ function App() {
46
61
  );
47
62
  }
48
63
 
64
+ 🧩 Props
65
+ Prop Type Valeur par défaut Description
66
+ isOpen boolean — Contrôle l’affichage du modal
67
+ onClose function — Fonction appelée pour fermer le modal
68
+ type "success" | "error" "success" Type du modal (impacte le style et l’accessibilité)
69
+ message string "" Message affiché dans le modal
70
+ closeOnEsc boolean true Active la fermeture avec la touche ESC
71
+
72
+ ## ♿ Accessibilité
73
+
74
+ role="dialog"
75
+
76
+ aria-modal="true"
77
+
78
+ aria-label dynamique selon le type (Succès ou Erreur)
79
+
80
+ Gestion clavier avec la touche ESC
81
+
82
+ ## 📄 Licence
83
+
84
+ MIT © Andoniaina
85
+
49
86
  export default App;
package/package.json CHANGED
@@ -1,61 +1,62 @@
1
- {
2
- "name": "@andoniaina/react-modal",
3
- "version": "1.1.5",
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
- },
20
- "scripts": {
21
- "dev": "vite",
22
- "build": "vite build",
23
- "lint": "eslint .",
24
- "preview": "vite preview"
25
- },
26
- "keywords": [
27
- "react",
28
- "modal",
29
- "dialog",
30
- "accessible",
31
- "ui",
32
- "component"
33
- ],
34
- "author": "Andoniaina",
35
- "license": "MIT",
36
- "repository": {
37
- "type": "git",
38
- "url": "https://github.com/andoniaina/react-modal"
39
- },
40
- "bugs": {
41
- "url": "https://github.com/andoniaina/react-modal/issues"
42
- },
43
- "homepage": "https://github.com/andoniaina/react-modal#readme",
44
- "peerDependencies": {
45
- "react": ">=18",
46
- "react-dom": ">=18"
47
- },
48
- "devDependencies": {
49
- "@eslint/js": "^9.39.1",
50
- "@types/react": "^19.2.5",
51
- "@types/react-dom": "^19.2.3",
52
- "@vitejs/plugin-react": "^5.1.1",
53
- "eslint": "^9.39.1",
54
- "eslint-plugin-react-hooks": "^7.0.1",
55
- "eslint-plugin-react-refresh": "^0.4.24",
56
- "globals": "^16.5.0",
57
- "react": ">=18",
58
- "react-dom": ">=18",
59
- "vite": "^7.2.4"
60
- }
61
- }
1
+ {
2
+ "name": "@andoniaina/react-modal",
3
+ "version": "1.1.7",
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
+ }