react-lgpd-consent 0.5.0 β†’ 0.5.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.
Files changed (3) hide show
  1. package/README.en.md +407 -70
  2. package/README.md +773 -99
  3. package/package.json +2 -2
package/README.en.md CHANGED
@@ -1,127 +1,464 @@
1
- <div align="center">
2
- <h1>react-lgpd-consent πŸͺ</h1>
3
- <p><strong>A React library for cookie consent management compliant with Brazil's 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
- <a href="https://lucianoedipo.github.io/react-lgpd-consent/storybook/"><img src="https://img.shields.io/badge/Storybook-Playground-ff4785?style=for-the-badge&logo=storybook&logoColor=white" alt="Storybook"></a>
10
- </div>
1
+ <div align="center"><div align="center">
2
+
3
+ <h1>react-lgpd-consent πŸͺ</h1> <h1>react-lgpd-consent πŸͺ</h1>
4
+
5
+ <p><strong>LGPD-compliant cookie consent management for React</strong></p> <p><strong>A React library for cookie consent management compliant with Brazil's LGPD.</strong></p>
6
+
7
+
8
+
9
+ <div> <div>
10
+
11
+ <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> <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>
12
+
13
+ <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> <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>
14
+
15
+ <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> <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>
16
+
17
+ <a href="https://lucianoedipo.github.io/react-lgpd-consent/storybook/"><img src="https://img.shields.io/badge/Storybook-Playground-ff4785?style=for-the-badge&logo=storybook&logoColor=white" alt="Storybook"></a> <a href="https://lucianoedipo.github.io/react-lgpd-consent/storybook/"><img src="https://img.shields.io/badge/Storybook-Playground-ff4785?style=for-the-badge&logo=storybook&logoColor=white" alt="Storybook"></a>
18
+
19
+ </div> </div>
11
20
 
12
- <div>
13
- <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>
14
- <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>
15
- <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>
16
- </div>
17
21
 
18
- <div>
19
- <a href="https://codecov.io/gh/lucianoedipo/react-lgpd-consent"><img src="https://img.shields.io/codecov/c/github/lucianoedipo/react-lgpd-consent?style=for-the-badge&logo=codecov&logoColor=white" alt="Coverage"></a>
20
- <a href="https://bundlephobia.com/package/react-lgpd-consent"><img src="https://img.shields.io/bundlephobia/minzip/react-lgpd-consent?style=for-the-badge&logo=webpack&logoColor=white" alt="Bundle Size"></a>
21
- <a href="https://nodejs.org"><img src="https://img.shields.io/node/v/react-lgpd-consent?style=for-the-badge&logo=node.js&logoColor=white" alt="Node Version"></a>
22
+
23
+ <div> <div>
24
+
25
+ <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> <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>
26
+
27
+ <a href="https://reactjs.org/"><img src="https://img.shields.io/badge/React-18%2B%2019-61dafb?style=for-the-badge&logo=react&logoColor=white" alt="React 18+19"></a> <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>
28
+
29
+ <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> <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>
30
+
31
+ </div> </div>
32
+
33
+
34
+
35
+ <div> <div>
36
+
37
+ <a href="https://codecov.io/gh/lucianoedipo/react-lgpd-consent"><img src="https://img.shields.io/codecov/c/github/lucianoedipo/react-lgpd-consent?style=for-the-badge&logo=codecov&logoColor=white" alt="Coverage"></a> <a href="https://codecov.io/gh/lucianoedipo/react-lgpd-consent"><img src="https://img.shields.io/codecov/c/github/lucianoedipo/react-lgpd-consent?style=for-the-badge&logo=codecov&logoColor=white" alt="Coverage"></a>
38
+
39
+ <a href="https://bundlephobia.com/package/react-lgpd-consent"><img src="https://img.shields.io/bundlephobia/minzip/react-lgpd-consent?style=for-the-badge&logo=webpack&logoColor=white&label=Bundle" alt="Bundle Size"></a> <a href="https://bundlephobia.com/package/react-lgpd-consent"><img src="https://img.shields.io/bundlephobia/minzip/react-lgpd-consent?style=for-the-badge&logo=webpack&logoColor=white" alt="Bundle Size"></a>
40
+
41
+ </div> <a href="https://nodejs.org"><img src="https://img.shields.io/node/v/react-lgpd-consent?style=for-the-badge&logo=node.js&logoColor=white" alt="Node Version"></a>
42
+
22
43
  </div>
23
44
 
24
45
  <br />
25
46
 
47
+ <br />
48
+
26
49
  <p>
27
- <a href="#installation"><strong>Installation</strong></a> β€’
28
- <a href="#basic-usage"><strong>Basic Usage</strong></a> β€’
29
- <a href="./QUICKSTART.md"><strong>πŸ“š Quickstart</strong></a> β€’
30
- <a href="#documentation"><strong>Documentation</strong></a> β€’
31
- <a href="#contributing"><strong>Contributing</strong></a>
32
- </p>
33
-
34
- <p align="center">
50
+
51
+ <a href="#-installation"><strong>Installation</strong></a> β€’ <p>
52
+
53
+ <a href="#-quick-start"><strong>Quick Start</strong></a> β€’ <a href="#installation"><strong>Installation</strong></a> β€’
54
+
55
+ <a href="https://github.com/lucianoedipo/react-lgpd-consent/blob/main/QUICKSTART.en.md"><strong>πŸ“š Complete Guide</strong></a> β€’ <a href="#basic-usage"><strong>Basic Usage</strong></a> β€’
56
+
57
+ <a href="#-documentation"><strong>Documentation</strong></a> β€’ <a href="./QUICKSTART.md"><strong>πŸ“š Quickstart</strong></a> β€’
58
+
59
+ <a href="https://github.com/lucianoedipo/react-lgpd-consent/blob/main/packages/react-lgpd-consent/README.md">πŸ‡§πŸ‡· PortuguΓͺs</a> <a href="#documentation"><strong>Documentation</strong></a> β€’
60
+
61
+ </p> <a href="#contributing"><strong>Contributing</strong></a>
62
+
63
+ </div> </p>
64
+
65
+
66
+
67
+ --- <p align="center">
68
+
35
69
  <a href="./QUICKSTART.en.md"><img src="https://img.shields.io/badge/Quickstart-Get%20Started-blue?style=for-the-badge&logo=book" alt="Quickstart"></a>
36
- </p>
37
70
 
38
- <p align="center"><strong>Start here:</strong> follow the <a href="./QUICKSTART.en.md">Quickstart guide (QUICKSTART.en.md)</a> for step-by-step setup, TypeScript examples, props summary and MUI integration β€” recommended for new users.</p>
71
+ ## 🎯 What's New in v0.5.0 </p>
72
+
73
+
74
+
75
+ ### πŸ—οΈ Modular Architecture (BREAKING CHANGE) <p align="center"><strong>Start here:</strong> follow the <a href="./QUICKSTART.en.md">Quickstart guide (QUICKSTART.en.md)</a> for step-by-step setup, TypeScript examples, props summary and MUI integration β€” recommended for new users.</p>
76
+
39
77
  </div>
40
78
 
79
+ v0.5.0 introduces a **monorepo architecture** with 3 independent packages:
80
+
41
81
  ---
42
82
 
43
- ## πŸš€ Installation
83
+ | Package | Description | Bundle Size | Use when... |
84
+
85
+ |---------|-------------|-------------|-------------|## πŸš€ Installation
86
+
87
+ | [`@react-lgpd-consent/core`](https://www.npmjs.com/package/@react-lgpd-consent/core) | Headless logic, no UI | ~86 KB | You want to build custom UI |
88
+
89
+ | [`@react-lgpd-consent/mui`](https://www.npmjs.com/package/@react-lgpd-consent/mui) | Ready-to-use Material-UI components | ~104 KB | You want pre-built MUI components |```bash
90
+
91
+ | `react-lgpd-consent` | Aggregator (re-exports MUI) | ~104 KB | **v0.4.x compatibility** |npm install react-lgpd-consent @mui/material @emotion/react @emotion/styled js-cookie
44
92
 
45
- ```bash
46
- npm install react-lgpd-consent @mui/material @emotion/react @emotion/styled js-cookie
47
93
  ```
48
94
 
95
+ > **πŸ’‘ This package (`react-lgpd-consent`)** is the aggregator that maintains backward compatibility. It re-exports `@react-lgpd-consent/mui` and works exactly like v0.4.x, but with the new architecture.
96
+
49
97
  **Peer dependencies:** `react`, `react-dom`, `@mui/material` and `js-cookie`.
50
98
 
99
+ ### ✨ New Features in v0.5.0
100
+
51
101
  ---
52
102
 
53
- ## ✨ What's New in v0.4.5
103
+ - βœ… **Auto-injection of Components**: MUI's `ConsentProvider` automatically injects Banner, Modal, and Floating Button
104
+
105
+ - βœ… **Integrated MUI Theme**: Optional ThemeProvider support with `createDefaultConsentTheme()`## ✨ What's New in v0.4.5
106
+
107
+ - βœ… **Granular Control**: Props to disable individual components (`disableDefaultBanner`, `disableDefaultModal`, `disableDefaultFloatingButton`)
108
+
109
+ - βœ… **Developer Warnings**: Intelligent system that warns when UI components are missing (DEV only)### πŸ“Š DataLayer Events for Google Tag Manager
110
+
111
+ - βœ… **TypeScript Monorepo**: Configured paths for better IDE DX- **Standardized Events**: `consent_initialized` and `consent_updated` automatically dispatched
54
112
 
55
- ### πŸ“Š DataLayer Events for Google Tag Manager
56
- - **Standardized Events**: `consent_initialized` and `consent_updated` automatically dispatched
57
113
  - **Origin Tracking**: Identifies whether decision came from banner, modal, reset, or programmatic API
58
- - **LGPD Audit**: Complete change history with `changed_categories` and ISO 8601 timestamps
114
+
115
+ ### πŸ“¦ Migration from v0.4.x β†’ v0.5.0- **LGPD Audit**: Complete change history with `changed_categories` and ISO 8601 timestamps
116
+
59
117
  - **GTM Integration**: Full documentation with trigger and tag examples
60
- - **Public API**: Exported `pushConsentInitializedEvent` and `pushConsentUpdatedEvent` functions
61
118
 
62
- ### πŸ”§ CI/CD Improvements
119
+ **If you use `react-lgpd-consent` (this package):**- **Public API**: Exported `pushConsentInitializedEvent` and `pushConsentUpdatedEvent` functions
120
+
121
+
122
+
123
+ βœ… **No changes needed!** The API is 100% backward compatible.### πŸ”§ CI/CD Improvements
124
+
63
125
  - **Migration to pnpm**: Workflows updated from npm to pnpm, resolving dependency conflicts
64
- - **Optimized Build**: Faster and more reliable pipeline
65
126
 
66
- ---
127
+ ```tsx- **Optimized Build**: Faster and more reliable pipeline
67
128
 
68
- ## πŸ“– Basic Usage
129
+ // v0.4.x - still works
69
130
 
70
- Wrap your app with `ConsentProvider` (minimal example):
131
+ import { ConsentProvider, useConsent } from 'react-lgpd-consent'---
132
+
133
+
134
+
135
+ // v0.5.0 - same API, same components## πŸ“– Basic Usage
136
+
137
+ import { ConsentProvider, useConsent } from 'react-lgpd-consent'
138
+
139
+ ```Wrap your app with `ConsentProvider` (minimal example):
140
+
141
+
142
+
143
+ **If you want to optimize bundle size:**```tsx
71
144
 
72
- ```tsx
73
145
  import { ConsentProvider } from 'react-lgpd-consent'
74
146
 
75
- export default function App() {
76
- return (
147
+ ```tsx
148
+
149
+ // Option 1: Core (headless) + your own UI (~86 KB)export default function App() {
150
+
151
+ import { ConsentProvider } from '@react-lgpd-consent/core' return (
152
+
77
153
  <ConsentProvider categories={{ enabledCategories: ['analytics'] }}>
78
- <YourApp />
79
- </ConsentProvider>
154
+
155
+ // Option 2: MUI with ready components (~104 KB) <YourApp />
156
+
157
+ import { ConsentProvider } from '@react-lgpd-consent/mui' </ConsentProvider>
158
+
80
159
  )
81
- }
160
+
161
+ // Option 3: Aggregator (compatibility) (~104 KB)}
162
+
163
+ import { ConsentProvider } from 'react-lgpd-consent' // This package```
164
+
82
165
  ```
83
166
 
84
167
  - For full guides, TypeScript examples, props table and integrations see:
85
- -
168
+
169
+ ----
170
+
86
171
  - **[QUICKSTART.en.md](./QUICKSTART.en.md)** (recommended)
87
- - New in v0.4.0: `customCategories` support β€” see the β€œCustom categories (customCategories)” section in the Quickstart.
172
+
173
+ ## πŸš€ Installation - New in v0.4.0: `customCategories` support β€” see the β€œCustom categories (customCategories)” section in the Quickstart.
174
+
88
175
  - New in v0.4.1: native integrations for Facebook Pixel, Hotjar, Mixpanel, Clarity, Intercom, and Zendesk β€” see [INTEGRACOES.md](./INTEGRACOES.md).
89
- - Tip: set `designTokens.layout.backdrop: 'auto'` for a theme-aware blocking banner backdrop.
90
- - Auto-config of categories: the library detects required categories from integrations and surfaces toggles even if you forgot to enable them (initial value is always rejected). We still recommend explicitly listing them in `categories.enabledCategories` for clarity.
91
- - Non-blocked Policy/Terms pages: if `policyLinkUrl` and/or `termsLinkUrl` point to the current page, the blocking overlay is not applied β€” ensuring readability of these pages.
176
+
177
+ ```bash - Tip: set `designTokens.layout.backdrop: 'auto'` for a theme-aware blocking banner backdrop.
178
+
179
+ npm install react-lgpd-consent - Auto-config of categories: the library detects required categories from integrations and surfaces toggles even if you forgot to enable them (initial value is always rejected). We still recommend explicitly listing them in `categories.enabledCategories` for clarity.
180
+
181
+ ``` - Non-blocked Policy/Terms pages: if `policyLinkUrl` and/or `termsLinkUrl` point to the current page, the blocking overlay is not applied β€” ensuring readability of these pages.
182
+
92
183
  - **[Docs / API](./API.md)**
93
- - **[LGPD Compliance](./CONFORMIDADE.md)**
184
+
185
+ ### Peer Dependencies (auto-installed if not present)- **[LGPD Compliance](./CONFORMIDADE.md)**
186
+
94
187
  - **[Integrations](./INTEGRACOES.md)**
95
188
 
96
- ### 🎨 Interactive Documentation (GitHub Pages)
97
- - **[πŸ“– Storybook - Interactive Playground](https://lucianoedipo.github.io/react-lgpd-consent/storybook/)**: Explore and test all components live with interactive controls.
189
+ ```bash
190
+
191
+ npm install react react-dom @mui/material @emotion/react @emotion/styled### 🎨 Interactive Documentation (GitHub Pages)
192
+
193
+ ```- **[πŸ“– Storybook - Interactive Playground](https://lucianoedipo.github.io/react-lgpd-consent/storybook/)**: Explore and test all components live with interactive controls.
194
+
98
195
  - **[βš™οΈ TypeDoc - API Reference](https://lucianoedipo.github.io/react-lgpd-consent/docs/)**: Automatically generated complete API documentation.
99
- - **[🏠 Documentation Portal](https://lucianoedipo.github.io/react-lgpd-consent/)**: Home page that navigates between all docs sites.
100
196
 
101
- ### πŸ§‘β€πŸ« Developer Guidance (dev-only)
197
+ ---- **[🏠 Documentation Portal](https://lucianoedipo.github.io/react-lgpd-consent/)**: Home page that navigates between all docs sites.
198
+
199
+
200
+
201
+ ## ⚑ Quick Start### πŸ§‘β€πŸ« Developer Guidance (dev-only)
202
+
203
+
204
+
205
+ ### Basic Setup (3 lines of code)In development, the library prints a guidance panel in the console to help you configure correctly:
102
206
 
103
- In development, the library prints a guidance panel in the console to help you configure correctly:
104
207
  - Warns when using default categories; suggests making them explicit
105
- - Lists active categories and which ones require a UI toggle
106
- - Detects integrations that require categories and suggests enabling them
208
+
209
+ ```tsx- Lists active categories and which ones require a UI toggle
210
+
211
+ import { ConsentProvider } from 'react-lgpd-consent'- Detects integrations that require categories and suggests enabling them
212
+
107
213
  - Flags excessive number of categories (UX)
108
- - Highlights Brazilian LGPD best practices: opt-out by default, clear policy, consent logging, retention
109
- - Silenced in production; SSR-safe
110
214
 
111
- ### ⚠️ Breaking Changes v0.4.1
112
- - **Custom categories support**: `setPreference` and `ScriptIntegration.category` now use `string` instead of `Category`
113
- - **Minimal impact**: Code using literal strings continues working without changes
114
- - **Migration guide**: See [CHANGELOG.md](./CHANGELOG.md) for complete details
215
+ export default function App() {- Highlights Brazilian LGPD best practices: opt-out by default, clear policy, consent logging, retention
216
+
217
+ return (- Silenced in production; SSR-safe
218
+
219
+ <ConsentProvider categories={{ enabledCategories: ['analytics', 'marketing'] }}>
220
+
221
+ <YourApp />### ⚠️ Breaking Changes v0.4.1
222
+
223
+ </ConsentProvider>- **Custom categories support**: `setPreference` and `ScriptIntegration.category` now use `string` instead of `Category`
224
+
225
+ )- **Minimal impact**: Code using literal strings continues working without changes
226
+
227
+ }- **Migration guide**: See [CHANGELOG.md](./CHANGELOG.md) for complete details
228
+
229
+ ```
230
+
231
+ ---
232
+
233
+ **This already includes:**
234
+
235
+ - βœ… Cookie banner## 🀝 Contributing
236
+
237
+ - βœ… Preferences modal
238
+
239
+ - βœ… Floating button to reopen preferences1. Open an Issue for bugs or feature requests.
240
+
241
+ - βœ… Cookie persistence2. Follow `DEVELOPMENT.md` to submit a PR.
242
+
243
+ - βœ… SSR-safe (Next.js, Remix)
244
+
245
+ ---
246
+
247
+ ### Access Consent State
248
+
249
+ ## πŸ“„ License
250
+
251
+ ```tsx
252
+
253
+ import { useConsent } from 'react-lgpd-consent'MIT β€” see the `LICENSE` file.
254
+
255
+
256
+ function MyComponent() {
257
+ const { preferences, acceptCategory, rejectCategory } = useConsent()
258
+
259
+ if (preferences.analytics) {
260
+ // Analytics is allowed, load scripts
261
+ }
262
+
263
+ return (
264
+ <button onClick={() => acceptCategory('marketing')}>
265
+ Accept Marketing
266
+ </button>
267
+ )
268
+ }
269
+ ```
270
+
271
+ ### Load Scripts Based on Consent
272
+
273
+ ```tsx
274
+ import { ConsentScriptLoader } from 'react-lgpd-consent'
275
+
276
+ function Analytics() {
277
+ return (
278
+ <ConsentScriptLoader
279
+ category="analytics"
280
+ src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"
281
+ strategy="afterInteractive"
282
+ >
283
+ {`
284
+ window.dataLayer = window.dataLayer || [];
285
+ function gtag(){dataLayer.push(arguments);}
286
+ gtag('js', new Date());
287
+ gtag('config', 'GA_MEASUREMENT_ID');
288
+ `}
289
+ </ConsentScriptLoader>
290
+ )
291
+ }
292
+ ```
293
+
294
+ ---
295
+
296
+ ## 🎨 Customization
297
+
298
+ ### Material-UI Theme
299
+
300
+ ```tsx
301
+ import { ConsentProvider, createDefaultConsentTheme } from 'react-lgpd-consent'
302
+
303
+ <ConsentProvider
304
+ theme={createDefaultConsentTheme({
305
+ palette: {
306
+ primary: { main: '#your-brand-color' }
307
+ }
308
+ })}
309
+ categories={{ enabledCategories: ['analytics'] }}
310
+ >
311
+ <App />
312
+ </ConsentProvider>
313
+ ```
314
+
315
+ ### Disable Default Components
316
+
317
+ ```tsx
318
+ import { ConsentProvider, CookieBanner, PreferencesModal } from 'react-lgpd-consent'
319
+
320
+ <ConsentProvider
321
+ categories={{ enabledCategories: ['analytics'] }}
322
+ disableDefaultBanner
323
+ disableDefaultModal
324
+ >
325
+ {/* Use your own components */}
326
+ <CookieBanner position="bottom-left" />
327
+ <PreferencesModal showBranding={false} />
328
+ <App />
329
+ </ConsentProvider>
330
+ ```
331
+
332
+ ### Advanced Design Tokens
333
+
334
+ ```tsx
335
+ <ConsentProvider
336
+ categories={{ enabledCategories: ['analytics'] }}
337
+ designTokens={{
338
+ colors: {
339
+ primary: '#1976d2',
340
+ secondary: '#dc004e',
341
+ background: '#ffffff',
342
+ },
343
+ layout: {
344
+ backdropColor: 'rgba(0, 0, 0, 0.8)',
345
+ bannerPosition: 'bottom-center',
346
+ },
347
+ typography: {
348
+ fontFamily: 'Inter, sans-serif',
349
+ }
350
+ }}
351
+ >
352
+ <App />
353
+ </ConsentProvider>
354
+ ```
355
+
356
+ ---
357
+
358
+ ## πŸ“š Documentation
359
+
360
+ ### πŸ“– Complete Guides (GitHub)
361
+
362
+ - [**πŸ“š Quickstart**](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/QUICKSTART.en.md): Step-by-step tutorial with TypeScript examples
363
+ - [**πŸ—οΈ API Reference**](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/API.md): Complete reference for components, hooks, and types
364
+ - [**βš–οΈ LGPD Compliance**](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/CONFORMIDADE.md): Details about compliance and auditing
365
+ - [**πŸ”Œ Integrations**](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/INTEGRACOES.md): Google Analytics, GTM, Facebook Pixel, Hotjar, etc.
366
+ - [**πŸ›οΈ Architecture**](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/ARCHITECTURE.md): Monorepo architecture details for v0.5.0
367
+ - [**πŸ“ Changelog**](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/CHANGELOG.md): Complete version history
368
+
369
+ ### 🎨 Interactive Documentation (GitHub Pages)
370
+
371
+ - [**🎭 Storybook - Interactive Playground**](https://lucianoedipo.github.io/react-lgpd-consent/storybook/): Explore and test all components in real-time
372
+ - [**βš™οΈ TypeDoc - API Docs**](https://lucianoedipo.github.io/react-lgpd-consent/docs/): Auto-generated API documentation
373
+ - [**🏠 Documentation Portal**](https://lucianoedipo.github.io/react-lgpd-consent/): Central navigation for all docs
374
+
375
+ ---
376
+
377
+ ## πŸ”Œ Native Integrations
378
+
379
+ The library includes ready-to-use integrations for:
380
+
381
+ - βœ… **Google Analytics 4** (GA4)
382
+ - βœ… **Google Tag Manager** (GTM)
383
+ - βœ… **Facebook Pixel**
384
+ - βœ… **Hotjar**
385
+ - βœ… **Microsoft Clarity**
386
+ - βœ… **Mixpanel**
387
+ - βœ… **Intercom**
388
+ - βœ… **Zendesk**
389
+ - βœ… **UserWay** (Accessibility)
390
+
391
+ ```tsx
392
+ import { ConsentScriptLoader, createGoogleAnalyticsIntegration } from 'react-lgpd-consent'
393
+
394
+ <ConsentScriptLoader integration={createGoogleAnalyticsIntegration('GA_ID')} />
395
+ ```
396
+
397
+ [**See complete integrations guide β†’**](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/INTEGRACOES.md)
398
+
399
+ ---
400
+
401
+ ## 🧩 Package Ecosystem
402
+
403
+ ```
404
+ react-lgpd-consent (this package - aggregator)
405
+ β”œβ”€β”€ @react-lgpd-consent/core # Headless (86 KB)
406
+ └── @react-lgpd-consent/mui # MUI Components (104 KB)
407
+ ```
408
+
409
+ ### When to use each package?
410
+
411
+ | Scenario | Recommended Package |
412
+ |----------|---------------------|
413
+ | **Migration from v0.4.x** | `react-lgpd-consent` (this) |
414
+ | **Complete custom UI** | `@react-lgpd-consent/core` |
415
+ | **Ready MUI components** | `@react-lgpd-consent/mui` |
416
+ | **New project with MUI** | `@react-lgpd-consent/mui` |
417
+ | **Optimized bundle** | `@react-lgpd-consent/core` |
418
+
419
+ ---
420
+
421
+ ## 🌟 Features
422
+
423
+ - βœ… **TypeScript First**: Complete types and automatic inference
424
+ - βœ… **SSR-Safe**: Compatible with Next.js (App Router + Pages Router), Remix
425
+ - βœ… **Zero Config**: Works out-of-the-box with sensible defaults
426
+ - βœ… **Accessible**: WCAG 2.1 AA compliance, keyboard navigation, screen readers
427
+ - βœ… **Responsive**: Mobile-first design with adaptive breakpoints
428
+ - βœ… **Tree-shakeable**: Import only what you use
429
+ - βœ… **Themes**: Light/Dark/Auto with smooth transitions
430
+ - βœ… **i18n**: Multi-language support (pt-BR, en, es)
431
+ - βœ… **Auditable**: Developer logs and DataLayer events for GTM
115
432
 
116
433
  ---
117
434
 
118
435
  ## 🀝 Contributing
119
436
 
120
- 1. Open an Issue for bugs or feature requests.
121
- 2. Follow `DEVELOPMENT.md` to submit a PR.
437
+ Contributions are welcome! See the [Development Guide](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/DEVELOPMENT.md).
438
+
439
+ 1. Fork the repository
440
+ 2. Create a branch: `git checkout -b feature/my-feature`
441
+ 3. Commit: `git commit -m 'feat: my new feature'`
442
+ 4. Push: `git push origin feature/my-feature`
443
+ 5. Open a Pull Request
122
444
 
123
445
  ---
124
446
 
125
447
  ## πŸ“„ License
126
448
 
127
- MIT β€” see the `LICENSE` file.
449
+ MIT Β© [Luciano Edipo](https://github.com/lucianoedipo)
450
+
451
+ ---
452
+
453
+ ## πŸ”— Useful Links
454
+
455
+ - [**GitHub Repository**](https://github.com/lucianoedipo/react-lgpd-consent)
456
+ - [**NPM Package**](https://www.npmjs.com/package/react-lgpd-consent)
457
+ - [**Issues & Bugs**](https://github.com/lucianoedipo/react-lgpd-consent/issues)
458
+ - [**Changelog**](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/CHANGELOG.md)
459
+
460
+ ---
461
+
462
+ <div align="center">
463
+ <sub>Made with ❀️ for the React community</sub>
464
+ </div>