react-lgpd-consent 🍪

LGPD-compliant cookie consent management for React — this package is the aggregator that re-exports the MUI components for backwards compatibility. If you need a smaller bundle or headless API, prefer @react-lgpd-consent/core or @react-lgpd-consent/mui.

---

Overview

react-lgpd-consent is the compatibility aggregator for the v0.5.x monorepo. It re-exports the ready-made MUI components and keeps the API compatible with previous releases. If you want to optimize your bundle, import only @react-lgpd-consent/core (headless) or @react-lgpd-consent/mui/ui (MUI components only).

Key features:

• Cookie banner, preferences modal and floating button (MUI)
• Conditional script loading based on consent
• SSR-safe (Next.js / Remix compatible)
• Auditable events (consent_initialized, consent_updated)

---

Installation

Install the package and peer dependencies:

npm install react-lgpd-consent
# ensure peer deps are present in the host app
npm install react react-dom @mui/material @emotion/react @emotion/styled js-cookie --save-peer
Copy

This package re-exports @react-lgpd-consent/mui for compatibility. Import only what you need to reduce bundle size.

---

Quick Start

Minimal example (API compatible with v0.4.x):

import React from 'react'
import { ConsentProvider, useConsent } from 'react-lgpd-consent'

export default function App() {
  return (
    <ConsentProvider categories={{ enabledCategories: ['analytics', 'marketing'] }}>
      <YourApp />
    </ConsentProvider>
  )
}

function YourApp() {
  const { preferences, setPreference } = useConsent()

  return (
    <div>
      <button onClick={() => setPreference('marketing', true)}>Accept Marketing</button>
    </div>
  )
}
Copy

Load a script only if the user granted the related category:

import { ConsentScriptLoader, COMMON_INTEGRATIONS } from 'react-lgpd-consent'

function Analytics() {
  return (
    <ConsentScriptLoader
      integrations={[
        COMMON_INTEGRATIONS.googleAnalytics({ measurementId: 'GA_MEASUREMENT_ID' }),
      ]}
    />
  )
}
Copy

---

🆕 What's New in v0.7.0

Lifecycle Callbacks (#68)

<ConsentProvider
  onConsentInit={(state) => console.log('Initialized:', state)}
  onConsentChange={(current, prev) => console.log('Changed:', current)}
  onAuditLog={(entry) => fetch('/api/audit', {
    method: 'POST',
    body: JSON.stringify(entry)
  })}
>
Copy

ANPD Category Presets (#70)

import { createAnpdCategoriesConfig } from 'react-lgpd-consent'

const categories = createAnpdCategoriesConfig({
  include: ['analytics', 'marketing']
})
Copy

Consent Audit (#60)

import { createConsentAuditEntry } from 'react-lgpd-consent'

const audit = createConsentAuditEntry(state, {
  action: 'update',
  consentVersion: '1'
})
Copy

📖 Full documentation: API.md | TROUBLESHOOTING.md

---

Packages (monorepo)

Package	Description
@react-lgpd-consent/core	Headless logic (no UI) — build your own UI
@react-lgpd-consent/mui	Ready-to-use MUI components
react-lgpd-consent	Aggregator (re-exports MUI) — backward compatibility

---

Documentation & Examples

• 🚀 Quickstart - Step-by-step tutorial
• 📖 Recipes - Practical guide with common use cases (Next.js, CSP, Consent Mode v2)
• ⚙️ Workflows - CI/CD workflows documentation
• API Reference - Complete API reference
• Integrations - GA4, GTM, Facebook Pixel
• Storybook - Interactive components
• TypeDoc - Generated API docs

---

Contributing

Follow DEVELOPMENT.md in the repo. Suggested flow:

1. Fork
2. Branch: git checkout -b feat/my-feature
3. Commit: git commit -m "feat: description"
4. Push and open a PR

Before opening PR run the local pipeline:

npm run type-check
npm test
npm run lint
npm run build
npm run docs:generate
Copy

---

License

MIT © Luciano Edipo — see the LICENSE file.

---

If you want the Portuguese README, see README.md in the same package.