@rayels/loi25 1.0.0 → 1.0.1
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.
- package/README.md +175 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
# @rayels/loi25
|
|
2
|
+
|
|
3
|
+
> **FR** | [English](#english)
|
|
4
|
+
|
|
5
|
+
Composant React / Next.js pour le consentement aux cookies **Loi 25 du Québec** (Projet de loi 64). Léger, bilingue, conforme.
|
|
6
|
+
|
|
7
|
+
**Par [Rayels Consulting](https://rayelsconsulting.com)** — Agence numérique à Montréal
|
|
8
|
+
|
|
9
|
+
## Installation
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install @rayels/loi25
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Utilisation
|
|
16
|
+
|
|
17
|
+
```jsx
|
|
18
|
+
import { Loi25Banner } from '@rayels/loi25';
|
|
19
|
+
|
|
20
|
+
function App() {
|
|
21
|
+
return (
|
|
22
|
+
<>
|
|
23
|
+
<YourApp />
|
|
24
|
+
<Loi25Banner
|
|
25
|
+
lang="fr"
|
|
26
|
+
position="bottom"
|
|
27
|
+
theme="light"
|
|
28
|
+
privacyPolicyUrl="/politique-de-confidentialite"
|
|
29
|
+
/>
|
|
30
|
+
</>
|
|
31
|
+
);
|
|
32
|
+
}
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
### Avec Next.js App Router
|
|
36
|
+
|
|
37
|
+
```jsx
|
|
38
|
+
// app/layout.tsx
|
|
39
|
+
import { Loi25Banner } from '@rayels/loi25';
|
|
40
|
+
|
|
41
|
+
export default function RootLayout({ children }) {
|
|
42
|
+
return (
|
|
43
|
+
<html>
|
|
44
|
+
<body>
|
|
45
|
+
{children}
|
|
46
|
+
<Loi25Banner lang="fr" />
|
|
47
|
+
</body>
|
|
48
|
+
</html>
|
|
49
|
+
);
|
|
50
|
+
}
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
## Props
|
|
54
|
+
|
|
55
|
+
| Prop | Type | Défaut | Description |
|
|
56
|
+
|------|------|--------|-------------|
|
|
57
|
+
| `lang` | `'fr' \| 'en'` | `'fr'` | Langue |
|
|
58
|
+
| `position` | `'bottom' \| 'top'` | `'bottom'` | Position |
|
|
59
|
+
| `theme` | `'light' \| 'dark'` | `'light'` | Thème |
|
|
60
|
+
| `privacyPolicyUrl` | `string` | `'/politique-de-confidentialite'` | Lien confidentialité |
|
|
61
|
+
| `poweredByLink` | `boolean` | `true` | Afficher "Propulsé par Rayels" |
|
|
62
|
+
| `onAcceptAll` | `function` | — | Callback accepter tout |
|
|
63
|
+
| `onAcceptNecessary` | `function` | — | Callback nécessaire seulement |
|
|
64
|
+
|
|
65
|
+
## Vérifier le consentement
|
|
66
|
+
|
|
67
|
+
```js
|
|
68
|
+
// Partout dans votre code
|
|
69
|
+
const consent = localStorage.getItem('loi25-consent');
|
|
70
|
+
// 'all' | 'necessary' | null
|
|
71
|
+
|
|
72
|
+
if (consent === 'all') {
|
|
73
|
+
// Charger les traceurs
|
|
74
|
+
}
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
## Aussi disponible
|
|
78
|
+
|
|
79
|
+
- [`@rayels/loi25-core`](https://www.npmjs.com/package/@rayels/loi25-core) — Vanilla JS (sans React)
|
|
80
|
+
- [Plugin WordPress](https://github.com/raracx/rayels-loi25/tree/master/packages/wordpress)
|
|
81
|
+
- [Extension Chrome](https://github.com/raracx/rayels-loi25/tree/master/packages/chrome-extension)
|
|
82
|
+
- [Snippets VS Code](https://marketplace.visualstudio.com/items?itemName=rayels-consulting.rayels-loi25-snippets)
|
|
83
|
+
|
|
84
|
+
## Licence
|
|
85
|
+
|
|
86
|
+
MIT — [Rayels Consulting](https://rayelsconsulting.com)
|
|
87
|
+
|
|
88
|
+
---
|
|
89
|
+
|
|
90
|
+
<a id="english"></a>
|
|
91
|
+
|
|
92
|
+
# English
|
|
93
|
+
|
|
94
|
+
React / Next.js component for **Quebec Law 25** (Bill 64) cookie consent. Lightweight, bilingual, compliant.
|
|
95
|
+
|
|
96
|
+
**By [Rayels Consulting](https://rayelsconsulting.com)** — Montreal Digital Agency
|
|
97
|
+
|
|
98
|
+
## Install
|
|
99
|
+
|
|
100
|
+
```bash
|
|
101
|
+
npm install @rayels/loi25
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
## Usage
|
|
105
|
+
|
|
106
|
+
```jsx
|
|
107
|
+
import { Loi25Banner } from '@rayels/loi25';
|
|
108
|
+
|
|
109
|
+
function App() {
|
|
110
|
+
return (
|
|
111
|
+
<>
|
|
112
|
+
<YourApp />
|
|
113
|
+
<Loi25Banner
|
|
114
|
+
lang="fr"
|
|
115
|
+
position="bottom"
|
|
116
|
+
theme="light"
|
|
117
|
+
privacyPolicyUrl="/politique-de-confidentialite"
|
|
118
|
+
/>
|
|
119
|
+
</>
|
|
120
|
+
);
|
|
121
|
+
}
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
### With Next.js App Router
|
|
125
|
+
|
|
126
|
+
```jsx
|
|
127
|
+
// app/layout.tsx
|
|
128
|
+
import { Loi25Banner } from '@rayels/loi25';
|
|
129
|
+
|
|
130
|
+
export default function RootLayout({ children }) {
|
|
131
|
+
return (
|
|
132
|
+
<html>
|
|
133
|
+
<body>
|
|
134
|
+
{children}
|
|
135
|
+
<Loi25Banner lang="fr" />
|
|
136
|
+
</body>
|
|
137
|
+
</html>
|
|
138
|
+
);
|
|
139
|
+
}
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
## Props
|
|
143
|
+
|
|
144
|
+
| Prop | Type | Default | Description |
|
|
145
|
+
|------|------|---------|-------------|
|
|
146
|
+
| `lang` | `'fr' \| 'en'` | `'fr'` | Language |
|
|
147
|
+
| `position` | `'bottom' \| 'top'` | `'bottom'` | Position |
|
|
148
|
+
| `theme` | `'light' \| 'dark'` | `'light'` | Theme |
|
|
149
|
+
| `privacyPolicyUrl` | `string` | `'/politique-de-confidentialite'` | Privacy policy link |
|
|
150
|
+
| `poweredByLink` | `boolean` | `true` | Show "Powered by Rayels" |
|
|
151
|
+
| `onAcceptAll` | `function` | — | Callback on accept all |
|
|
152
|
+
| `onAcceptNecessary` | `function` | — | Callback on necessary only |
|
|
153
|
+
|
|
154
|
+
## Check consent
|
|
155
|
+
|
|
156
|
+
```js
|
|
157
|
+
// Anywhere in your code
|
|
158
|
+
const consent = localStorage.getItem('loi25-consent');
|
|
159
|
+
// 'all' | 'necessary' | null
|
|
160
|
+
|
|
161
|
+
if (consent === 'all') {
|
|
162
|
+
// Load trackers
|
|
163
|
+
}
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
## Also available
|
|
167
|
+
|
|
168
|
+
- [`@rayels/loi25-core`](https://www.npmjs.com/package/@rayels/loi25-core) — Vanilla JS (no React)
|
|
169
|
+
- [WordPress Plugin](https://github.com/raracx/rayels-loi25/tree/master/packages/wordpress)
|
|
170
|
+
- [Chrome Extension](https://github.com/raracx/rayels-loi25/tree/master/packages/chrome-extension)
|
|
171
|
+
- [VS Code Snippets](https://marketplace.visualstudio.com/items?itemName=rayels-consulting.rayels-loi25-snippets)
|
|
172
|
+
|
|
173
|
+
## License
|
|
174
|
+
|
|
175
|
+
MIT — [Rayels Consulting](https://rayelsconsulting.com)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rayels/loi25",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "React component for Loi 25 Quebec cookie consent banner. Bilingual, lightweight, compliant. By Rayels Consulting.",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"peerDependencies": {
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"homepage": "https://rayelsconsulting.com",
|
|
30
30
|
"repository": {
|
|
31
31
|
"type": "git",
|
|
32
|
-
"url": "https://github.com/raracx/rayels-loi25
|
|
32
|
+
"url": "https://github.com/raracx/rayels-loi25"
|
|
33
33
|
},
|
|
34
34
|
"license": "MIT"
|
|
35
35
|
}
|