@rayels/loi25
v1.0.1
Published
React component for Loi 25 Quebec cookie consent banner. Bilingual, lightweight, compliant. By Rayels Consulting.
Maintainers
rayelcxReadme
@rayels/loi25
FR | English
Composant React / Next.js pour le consentement aux cookies Loi 25 du Québec (Projet de loi 64). Léger, bilingue, conforme.
Par Rayels Consulting — Agence numérique à Montréal
Installation
npm install @rayels/loi25Utilisation
import { Loi25Banner } from '@rayels/loi25';
function App() {
return (
<>
<YourApp />
<Loi25Banner
lang="fr"
position="bottom"
theme="light"
privacyPolicyUrl="/politique-de-confidentialite"
/>
</>
);
}Avec Next.js App Router
// app/layout.tsx
import { Loi25Banner } from '@rayels/loi25';
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<Loi25Banner lang="fr" />
</body>
</html>
);
}Props
| Prop | Type | Défaut | Description |
|------|------|--------|-------------|
| lang | 'fr' \| 'en' | 'fr' | Langue |
| position | 'bottom' \| 'top' | 'bottom' | Position |
| theme | 'light' \| 'dark' | 'light' | Thème |
| privacyPolicyUrl | string | '/politique-de-confidentialite' | Lien confidentialité |
| poweredByLink | boolean | true | Afficher "Propulsé par Rayels" |
| onAcceptAll | function | — | Callback accepter tout |
| onAcceptNecessary | function | — | Callback nécessaire seulement |
Vérifier le consentement
// Partout dans votre code
const consent = localStorage.getItem('loi25-consent');
// 'all' | 'necessary' | null
if (consent === 'all') {
// Charger les traceurs
}Aussi disponible
@rayels/loi25-core— Vanilla JS (sans React)- Plugin WordPress
- Extension Chrome
- Snippets VS Code
Licence
MIT — Rayels Consulting
English
React / Next.js component for Quebec Law 25 (Bill 64) cookie consent. Lightweight, bilingual, compliant.
By Rayels Consulting — Montreal Digital Agency
Install
npm install @rayels/loi25Usage
import { Loi25Banner } from '@rayels/loi25';
function App() {
return (
<>
<YourApp />
<Loi25Banner
lang="fr"
position="bottom"
theme="light"
privacyPolicyUrl="/politique-de-confidentialite"
/>
</>
);
}With Next.js App Router
// app/layout.tsx
import { Loi25Banner } from '@rayels/loi25';
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<Loi25Banner lang="fr" />
</body>
</html>
);
}Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| lang | 'fr' \| 'en' | 'fr' | Language |
| position | 'bottom' \| 'top' | 'bottom' | Position |
| theme | 'light' \| 'dark' | 'light' | Theme |
| privacyPolicyUrl | string | '/politique-de-confidentialite' | Privacy policy link |
| poweredByLink | boolean | true | Show "Powered by Rayels" |
| onAcceptAll | function | — | Callback on accept all |
| onAcceptNecessary | function | — | Callback on necessary only |
Check consent
// Anywhere in your code
const consent = localStorage.getItem('loi25-consent');
// 'all' | 'necessary' | null
if (consent === 'all') {
// Load trackers
}Also available
@rayels/loi25-core— Vanilla JS (no React)- WordPress Plugin
- Chrome Extension
- VS Code Snippets
License
MIT — Rayels Consulting