Este documento descreve as medidas de conformidade da biblioteca react-lgpd-consent com a Lei Geral de Proteção de Dados (LGPD) e as diretrizes da ANPD, detalhando as ferramentas que auxiliam os desenvolvedores a manter a conformidade.
Referências Oficiais:
Este documento descreve as medidas de conformidade da biblioteca react-lgpd-consent com a Lei Geral de Proteção de Dados (LGPD) e as diretrizes da ANPD, detalhando as ferramentas que auxiliam os desenvolvedores a manter a conformidade.
A biblioteca implementa os seguintes princípios e requisitos da LGPD:
ConsentProvider
. Isso reduz a superfície de dados e atende ao princípio da minimização.version
(versão da estrutura do cookie), consentDate
(data do primeiro consentimento), lastUpdate
(data da última alteração) e source
(origem da ação: "banner" ou "modal").SameSite=Lax
por padrão e o atributo secure
é ativado automaticamente quando o site é servido via HTTPS.A biblioteca inclui um sistema que orienta os desenvolvedores durante a implementação, exibindo informações úteis no console para garantir que a configuração esteja correta.
Em ambiente de desenvolvimento (NODE_ENV !== 'production'
), a biblioteca exibe:
[🍪 LGPD-CONSENT] ⚠️ Avisos de Configuração
[🍪 LGPD-CONSENT] Nenhuma configuração de categorias especificada. Usando padrão: necessary + analytics.
[🍪 LGPD-CONSENT] 🔧 Categorias Ativas (para UI customizada)
┌─────────────┬──────────────────────┬─────────────┬─────────────┐
│ ID │ Nome │ Toggle UI? │ Essencial? │
├─────────────┼──────────────────────┼─────────────┼─────────────┤
│ necessary │ Cookies Necessários │ ❌ NÃO │ 🔒 SIM │
│ analytics │ Cookies Analíticos │ ✅ SIM │ ⚙️ NÃO │
└─────────────┴──────────────────────┴─────────────┴─────────────┘
IMPORTANTE: Este sistema é automaticamente desativado em produção. Para forçar a desativação em qualquer ambiente, use a prop disableDeveloperGuidance={true}
no ConsentProvider
.
Para garantir a conformidade, especifique apenas as categorias de cookies que seu projeto realmente utiliza através da prop categories
:
<ConsentProvider
categories={{
// Habilita apenas as categorias que você realmente usa
enabledCategories: ['analytics', 'marketing'],
}}
>
<App />
</ConsentProvider>
Para construir componentes de UI customizados que reagem à configuração, utilize os hooks:
useCategories()
: Fornece uma lista completa das categorias ativas no projeto.useCategoryStatus('id')
: Verifica o status de uma categoria específica (se está ativa, se é essencial, etc.).import { useCategoryStatus } from 'react-lgpd-consent'
function AnalyticsFeature() {
const analytics = useCategoryStatus('analytics')
// Não renderiza o componente se a categoria 'analytics' não estiver configurada no ConsentProvider
if (!analytics.isActive) {
return null
}
return <AnalyticsDashboard />
}