react-lgpd-consent 0.3.0 → 0.3.2
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/CHANGELOG.md +468 -0
- package/README.md +92 -117
- package/dist/{PreferencesModal-XCTM6WJN.js → PreferencesModal-7RSEEVUK.js} +1 -1
- package/dist/chunk-JUZQJHQW.js +1406 -0
- package/dist/index.cjs +678 -311
- package/dist/index.d.cts +1683 -268
- package/dist/index.d.ts +1683 -268
- package/dist/index.js +29 -11
- package/package.json +17 -12
- package/COMPLIANCE.md +0 -107
- package/dist/chunk-R3IKVZBC.js +0 -1070
package/README.md
CHANGED
|
@@ -1,171 +1,146 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
>
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
1
|
+
<div align="center">
|
|
2
|
+
<h1>react-lgpd-consent 🍪</h1>
|
|
3
|
+
<p><strong>Uma biblioteca React para gerenciamento de consentimento de cookies em conformidade com a LGPD.</strong></p>
|
|
4
|
+
|
|
5
|
+
<div>
|
|
6
|
+
<a href="https://www.npmjs.com/package/react-lgpd-consent"><img src="https://img.shields.io/npm/v/react-lgpd-consent?style=for-the-badge&logo=npm&color=cb3837&logoColor=white" alt="NPM Version"></a>
|
|
7
|
+
<a href="https://www.npmjs.com/package/react-lgpd-consent"><img src="https://img.shields.io/npm/dm/react-lgpd-consent?style=for-the-badge&logo=npm&color=ff6b35&logoColor=white" alt="Downloads"></a>
|
|
8
|
+
<a href="https://github.com/lucianoedipo/react-lgpd-consent/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/react-lgpd-consent?style=for-the-badge&color=green&logoColor=white" alt="License"></a>
|
|
9
|
+
</div>
|
|
10
|
+
|
|
11
|
+
<div>
|
|
12
|
+
<a href="https://www.typescriptlang.org/"><img src="https://img.shields.io/badge/TypeScript-Ready-3178c6?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript Ready"></a>
|
|
13
|
+
<a href="https://reactjs.org/"><img src="https://img.shields.io/badge/React-18+-61dafb?style=for-the-badge&logo=react&logoColor=white" alt="React 18+"></a>
|
|
14
|
+
<a href="https://nextjs.org/"><img src="https://img.shields.io/badge/Next.js-Compatible-000000?style=for-the-badge&logo=next.js&logoColor=white" alt="Next.js Compatible"></a>
|
|
15
|
+
</div>
|
|
16
|
+
|
|
17
|
+
<br>
|
|
18
|
+
|
|
19
|
+
<p>
|
|
20
|
+
<a href="#-instalação"><strong>Instalação</strong></a> •
|
|
21
|
+
<a href="#-uso-básico"><strong>Uso Básico</strong></a> •
|
|
22
|
+
<a href="#-documentação-completa"><strong>Documentação</strong></a> •
|
|
23
|
+
<a href="#-como-contribuir"><strong>Contribuir</strong></a>
|
|
24
|
+
</p>
|
|
25
|
+
</div>
|
|
26
|
+
|
|
27
|
+
---
|
|
28
|
+
|
|
29
|
+
## 🎯 Por que usar `react-lgpd-consent`?
|
|
30
|
+
|
|
31
|
+
Esta biblioteca oferece uma solução robusta e flexível para gerenciar o consentimento de cookies em aplicações React, com foco total na **Lei Geral de Proteção de Dados (LGPD)** do Brasil.
|
|
32
|
+
|
|
33
|
+
### Principais Funcionalidades
|
|
34
|
+
|
|
35
|
+
| Funcionalidade | Descrição |
|
|
36
|
+
| -------------------------------- | ----------------------------------------------------------------------------------------------------- |
|
|
37
|
+
| 🇧🇷 **Foco na LGPD** | Implementação baseada nas diretrizes da ANPD, com textos e categorias alinhados à lei brasileira. |
|
|
38
|
+
| 🎨 **UI Automática e Customizável** | Componentes de UI (Banner e Modal) prontos para uso, baseados em Material-UI, e totalmente substituíveis. |
|
|
39
|
+
| ⚙️ **Configuração Consciente** | A prop `categories` força a declaração explícita dos cookies utilizados, seguindo o princípio da minimização. |
|
|
40
|
+
| 🧠 **Guia para Desenvolvedores** | Sistema que exibe avisos e sugestões no console (em ambiente de dev) para garantir a correta implementação. |
|
|
41
|
+
| 🚀 **Integrações Nativas** | Carregamento automático de scripts como Google Analytics e GTM, condicionado ao consentimento do usuário. |
|
|
42
|
+
| 🔒 **Auditoria e Transparência** | O cookie de consentimento armazena metadados como data, origem e versão para fins de auditoria. |
|
|
43
|
+
|
|
44
|
+
---
|
|
26
45
|
|
|
27
46
|
## 🚀 Instalação
|
|
28
47
|
|
|
29
48
|
```bash
|
|
30
|
-
npm install react-lgpd-consent
|
|
49
|
+
npm install react-lgpd-consent @mui/material @emotion/react @emotion/styled js-cookie
|
|
31
50
|
```
|
|
32
51
|
|
|
33
|
-
|
|
52
|
+
**Dependências Peer:**
|
|
34
53
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
54
|
+
A biblioteca requer `react`, `react-dom`, `@mui/material` e `js-cookie` como dependências peer.
|
|
55
|
+
|
|
56
|
+
---
|
|
38
57
|
|
|
39
58
|
## 📖 Uso Básico
|
|
40
59
|
|
|
41
|
-
|
|
60
|
+
Envolva sua aplicação com o `ConsentProvider` e configure as categorias de cookies que você utiliza.
|
|
42
61
|
|
|
43
62
|
```tsx
|
|
44
|
-
// Em seu
|
|
45
|
-
import { ConsentProvider } from 'react-lgpd-consent'
|
|
63
|
+
// Em seu arquivo principal (ex: App.tsx)
|
|
64
|
+
import { ConsentProvider } from 'react-lgpd-consent';
|
|
46
65
|
|
|
47
66
|
function App() {
|
|
48
67
|
return (
|
|
49
68
|
<ConsentProvider
|
|
50
|
-
// 1. Especifique as categorias que seu site utiliza
|
|
51
69
|
categories={{
|
|
70
|
+
// É obrigatório especificar as categorias que seu site usa.
|
|
71
|
+
// A categoria 'necessary' é sempre incluída.
|
|
52
72
|
enabledCategories: ['analytics', 'marketing'],
|
|
53
73
|
}}
|
|
54
|
-
// 2. (Opcional) Adicione textos para total transparência
|
|
55
|
-
texts={{
|
|
56
|
-
controllerInfo: 'Controlado por: Sua Empresa LTDA',
|
|
57
|
-
userRights: 'Você tem o direito de acessar e corrigir seus dados.',
|
|
58
|
-
}}
|
|
59
|
-
// 3. (Opcional) Adicione callbacks para auditoria
|
|
60
|
-
onConsentGiven={(state) => console.log('Consentimento dado:', state)}
|
|
61
74
|
>
|
|
62
|
-
{/* O
|
|
63
|
-
<
|
|
64
|
-
<p>Bem-vindo ao meu site.</p>
|
|
65
|
-
|
|
66
|
-
{/* O ConsentProvider agora renderiza automaticamente o banner e o botão flutuante */}
|
|
67
|
-
{/* Você pode sobrescrevê-los usando as props CookieBannerComponent e FloatingPreferencesButtonComponent */}
|
|
75
|
+
{/* O banner e o botão de preferências aparecerão automaticamente */}
|
|
76
|
+
<SuaAplicacao />
|
|
68
77
|
</ConsentProvider>
|
|
69
|
-
)
|
|
78
|
+
);
|
|
70
79
|
}
|
|
71
|
-
|
|
72
|
-
export default App
|
|
73
80
|
```
|
|
74
81
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
### Configuração Consciente
|
|
78
|
-
|
|
79
|
-
A prop `categories` no `ConsentProvider` é o ponto central da biblioteca. Ela força o desenvolvedor a declarar quais categorias de cookies são utilizadas, em linha com o princípio de minimização de dados da LGPD.
|
|
80
|
-
|
|
81
|
-
```tsx
|
|
82
|
-
<ConsentProvider
|
|
83
|
-
categories={{
|
|
84
|
-
// Habilita as categorias padrão 'analytics' e 'functional'
|
|
85
|
-
enabledCategories: ['analytics', 'functional'],
|
|
86
|
-
}}
|
|
87
|
-
>
|
|
88
|
-
{/*...*/}
|
|
89
|
-
</ConsentProvider>
|
|
90
|
-
```
|
|
91
|
-
|
|
92
|
-
### Carregamento de Scripts (`ConsentScriptLoader`)
|
|
93
|
-
|
|
94
|
-
Evite carregar scripts de rastreamento antes do consentimento. O `ConsentScriptLoader` faz isso automaticamente.
|
|
82
|
+
### Exemplo com Integração e Textos Customizados
|
|
95
83
|
|
|
96
84
|
```tsx
|
|
97
85
|
import {
|
|
98
86
|
ConsentProvider,
|
|
99
87
|
ConsentScriptLoader,
|
|
100
88
|
createGoogleAnalyticsIntegration,
|
|
101
|
-
} from 'react-lgpd-consent'
|
|
89
|
+
} from 'react-lgpd-consent';
|
|
102
90
|
|
|
91
|
+
// 1. Crie as integrações que você precisa
|
|
103
92
|
const integrations = [
|
|
104
93
|
createGoogleAnalyticsIntegration({
|
|
105
|
-
measurementId: 'G-XXXXXXXXXX',
|
|
94
|
+
measurementId: 'G-XXXXXXXXXX', // Substitua pelo seu ID
|
|
106
95
|
}),
|
|
107
|
-
]
|
|
96
|
+
];
|
|
108
97
|
|
|
109
98
|
function App() {
|
|
110
99
|
return (
|
|
111
|
-
<ConsentProvider
|
|
112
|
-
{
|
|
100
|
+
<ConsentProvider
|
|
101
|
+
categories={{ enabledCategories: ['analytics'] }}
|
|
102
|
+
texts={{
|
|
103
|
+
bannerMessage: 'Nós usamos cookies para analisar o tráfego e melhorar a sua experiência.',
|
|
104
|
+
acceptAll: 'Aceitar',
|
|
105
|
+
declineAll: 'Recusar',
|
|
106
|
+
// Para conformidade com a ANPD, preencha os campos abaixo
|
|
107
|
+
controllerInfo: 'Controlado por: Sua Empresa LTDA (CNPJ: XX.XXX.XXX/XXXX-XX)',
|
|
108
|
+
contactInfo: 'Contato do DPO: dpo@suaempresa.com',
|
|
109
|
+
}}
|
|
110
|
+
onConsentGiven={(state) => {
|
|
111
|
+
console.log('O usuário deu o primeiro consentimento!', state.preferences);
|
|
112
|
+
}}
|
|
113
|
+
>
|
|
114
|
+
{/* 2. Adicione o loader de scripts para carregá-los após o consentimento */}
|
|
113
115
|
<ConsentScriptLoader integrations={integrations} />
|
|
114
116
|
|
|
115
|
-
|
|
117
|
+
<SuaAplicacao />
|
|
116
118
|
</ConsentProvider>
|
|
117
|
-
)
|
|
119
|
+
);
|
|
118
120
|
}
|
|
119
121
|
```
|
|
120
122
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
Renderize componentes ou partes da sua UI apenas se o usuário consentiu com uma categoria específica.
|
|
124
|
-
|
|
125
|
-
```tsx
|
|
126
|
-
import { ConsentGate } from 'react-lgpd-consent'
|
|
127
|
-
|
|
128
|
-
function MarketingPixel() {
|
|
129
|
-
return (
|
|
130
|
-
<ConsentGate category="marketing">
|
|
131
|
-
{/* Este componente só será renderizado se o usuário aceitar cookies de marketing */}
|
|
132
|
-
<img src="/pixel.gif" alt="Marketing Pixel" />
|
|
133
|
-
</ConsentGate>
|
|
134
|
-
)
|
|
135
|
-
}
|
|
136
|
-
```
|
|
137
|
-
|
|
138
|
-
### API e Funcionalidades
|
|
139
|
-
|
|
140
|
-
A versão `v0.3.0` simplifica a API e melhora a experiência do desenvolvedor.
|
|
141
|
-
|
|
142
|
-
- **Componentes UI Sobrescrevíveis com Tipagem Clara**: Agora você pode fornecer seus próprios componentes para o banner, modal e botão flutuante, com props tipadas para garantir a compatibilidade. Consulte `CustomCookieBannerProps`, `CustomPreferencesModalProps` e `CustomFloatingPreferencesButtonProps` para detalhes.
|
|
143
|
-
- **Controle Simplificado do Modal**: A prop `disableAutomaticModal` foi removida. A visibilidade do modal é controlada internamente.
|
|
144
|
-
- **Remoção de Hooks Internos**: O hook `useConsentComponentProps` foi removido para simplificar a API. Use `useConsent()` e `useConsentTexts()` diretamente.
|
|
145
|
-
|
|
146
|
-
### Hooks
|
|
123
|
+
---
|
|
147
124
|
|
|
148
|
-
|
|
125
|
+
## 📚 Documentação Completa
|
|
149
126
|
|
|
150
|
-
|
|
151
|
-
- `useCategories()`: Retorna a lista de todas as categorias ativas no projeto.
|
|
152
|
-
- `useCategoryStatus('id')`: Verifica se uma categoria específica está ativa e configurada.
|
|
127
|
+
Para mais detalhes sobre customização, hooks e funcionalidades, consulte os seguintes guias:
|
|
153
128
|
|
|
154
|
-
|
|
129
|
+
- **[Guia da API (`API.md`)](./API.md)**: Referência completa de todos os componentes, hooks e tipos.
|
|
130
|
+
- **[Guia de Conformidade (`CONFORMIDADE.md`)](./CONFORMIDADE.md)**: Detalhes sobre as funcionalidades de conformidade com a LGPD.
|
|
131
|
+
- **[Guia de Integrações (`INTEGRACOES.md`)](./INTEGRACOES.md)**: Como usar as integrações nativas e criar as suas.
|
|
155
132
|
|
|
156
|
-
|
|
133
|
+
---
|
|
157
134
|
|
|
158
|
-
|
|
159
|
-
- **Minimização de Dados**: Apenas as categorias declaradas são gerenciadas e armazenadas no cookie.
|
|
160
|
-
- **Transparência**: O sistema de textos e o cookie de auditoria fornecem informações claras.
|
|
161
|
-
- **Facilidade de Revogação**: O usuário pode alterar suas preferências a qualquer momento.
|
|
135
|
+
## 🤝 Como Contribuir
|
|
162
136
|
|
|
163
|
-
|
|
137
|
+
Contribuições são muito bem-vindas! Este é um projeto open-source para a comunidade brasileira.
|
|
164
138
|
|
|
165
|
-
|
|
139
|
+
1. **Reporte Bugs ou Sugira Melhorias**: Abra uma [Issue no GitHub](https://github.com/lucianoedipo/react-lgpd-consent/issues).
|
|
140
|
+
2. **Envie um Pull Request**: Siga as instruções no nosso [Guia de Desenvolvimento (`DEVELOPMENT.md`)](./DEVELOPMENT.md).
|
|
166
141
|
|
|
167
|
-
|
|
142
|
+
---
|
|
168
143
|
|
|
169
144
|
## 📄 Licença
|
|
170
145
|
|
|
171
|
-
Este projeto está sob a
|
|
146
|
+
Este projeto está licenciado sob a **MIT License**. Veja o arquivo [LICENSE](./LICENSE) para mais detalhes.
|