react-lgpd-consent 🍪

Gerenciamento de consentimento de cookies em conformidade com a LGPD — pacote agregador que re-exporta os componentes MUI por conveniência. Se você precisa só da lógica headless ou de um bundle menor, prefira @react-lgpd-consent/core ou @react-lgpd-consent/mui conforme o seu caso.

---

Descrição

react-lgpd-consent é o pacote agregador compatível com versões anteriores (v0.4.x → v0.5.x). Ele re-exporta os componentes prontos em MUI e facilita a migração. Para projetos mais otimizados, considere importar diretamente @react-lgpd-consent/core (headless) ou @react-lgpd-consent/mui (componentes MUI).

Principais características:

• Banner de cookies, modal de preferências e botão flutuante prontos (MUI)
• Carregamento condicional de scripts com base no consentimento
• SSR-safe (compatível com Next.js / Remix)
• Eventos auditáveis (consent_initialized, consent_updated)

---

Instalação

Instale o pacote e as peer-dependencies se necessário:

npm install react-lgpd-consent
npm install react react-dom @mui/material @emotion/react @emotion/styled js-cookie --save-peer
Copy

Observação: react-lgpd-consent é o agregador (re-exporta @react-lgpd-consent/mui). Para otimizar bundle, importe apenas o pacote que você precisa.

---

Início rápido

Exemplo mínimo (mantém compatibilidade com 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, acceptCategory } = useConsent()

  return (
    <div>
      <button onClick={() => acceptCategory('marketing')}>Aceitar Marketing</button>
    </div>
  )
}
Copy

Para carregar scripts condicionados ao consentimento:

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

function Analytics() {
  return (
    <ConsentScriptLoader
      category="analytics"
      src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"
      strategy="afterInteractive"
    >
      {`window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'GA_MEASUREMENT_ID');`}
    </ConsentScriptLoader>
  )
}
Copy

---

Pacotes (monorepo v0.5.x)

Pacote	Descrição
@react-lgpd-consent/core	Lógica headless (sem UI) — recomendado para UI customizada
@react-lgpd-consent/mui	Componentes prontos em MUI
react-lgpd-consent	Agregador (re-exporta MUI) — compatibilidade retroativa

---

Documentação e exemplos

• Quickstart: QUICKSTART.md (tutoriais e exemplos) — veja no repositório
• API Reference: API.md
• Integrações: INTEGRACOES.md
• Storybook: https://lucianoedipo.github.io/react-lgpd-consent/storybook/
• TypeDoc: https://lucianoedipo.github.io/react-lgpd-consent/docs/

---

Contribuindo

Leia DEVELOPMENT.md no repositório principal. Fluxo sugerido:

1. Fork
2. Branch: git checkout -b feat/minha-feature
3. Commit: git commit -m "feat: descrição"
4. Push e abra PR

Antes de criar PR execute a pipeline local sugerida:

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

---

Licença

MIT © Luciano Edipo — veja o arquivo LICENSE.

---

If you prefer the English version of the README, consult README.en.md in the same package.