Componentes Material-UI prontos para gerenciamento de consentimento LGPD
npm install @react-lgpd-consent/mui> Componentes Material-UI para react-lgpd-consent - UI pronta para usar


O pacote @react-lgpd-consent/mui fornece componentes visuais prontos para uso baseados em Material-UI para a biblioteca react-lgpd-consent.
``bash`
npm install @react-lgpd-consent/mui @mui/material @mui/icons-materialou
pnpm add @react-lgpd-consent/mui @mui/material @mui/icons-material
Peer Dependencies:
- @mui/material@^7.0.0 || ^6.0.0 || ^5.15.0@mui/icons-material@^7.0.0 || ^6.0.0 || ^5.15.0
- (opcional)react@^18.2.0 || ^19.0.0
- , react-dom@^18.2.0 || ^19.0.0
- @react-lgpd-consent/mui/ui: apenas UI (ConsentProvider MUI + componentes). Ideal para bundles menores e sem re-export do core.@react-lgpd-consent/mui
- : compatibilidade total (re-exporta o core); use headless ou ConsentProviderHeadless daqui se precisar da lógica.@react-lgpd-consent/core
- : headless puro, recomendado para hooks/utils na sua própria UI.
`tsx
import {
ConsentProvider,
CookieBanner,
FloatingPreferencesButton
} from '@react-lgpd-consent/mui'
function App() {
return (
{/ O PreferencesModal é injetado automaticamente! /}
)
}
`
> ✨ Nota: O ConsentProvider deste pacote automaticamente renderiza o PreferencesModal. Você não precisa incluí-lo manualmente!
`tsx
import { ConsentProvider, PreferencesModal } from '@react-lgpd-consent/mui'
function App() {
return (
PreferencesModalComponent={(props) => (
)}
>
)
}
`
Monitore eventos para auditoria:
`tsx
import { ConsentProvider } from '@react-lgpd-consent/mui'
onConsentChange={(current, prev) => console.log('Mudou:', current)}
onAuditLog={(entry) => {
fetch('/api/audit', { method: 'POST', body: JSON.stringify(entry) })
}}
>
`
`tsx
import { createAnpdCategoriesConfig } from '@react-lgpd-consent/mui'
const categories = createAnpdCategoriesConfig({
include: ['analytics', 'marketing']
})
`
📖 Documentação completa: API.md | TROUBLESHOOTING.md
---
Se você quiser controle total sobre a UI:
`tsx
import { ConsentProviderHeadless, useConsent } from '@react-lgpd-consent/mui'
function App() {
return (
)
}
function CustomUI() {
const { acceptAll, rejectAll } = useConsent()
return (
🎯 Componentes Incluídos
-
CookieBanner - Banner de consentimento (modal ou snackbar)
- PreferencesModal - Modal de preferências detalhadas
- FloatingPreferencesButton - Botão flutuante para reabrir preferências
- Branding - Componente de marca/logo customizávelNota: Este pacote re-exporta todo o
@react-lgpd-consent/core, então você tem acesso a todos os hooks, contextos, utilitários e tipos.🎨 Customização
`tsx
blocking={true}
policyLinkUrl="/privacy"
position="bottom"
anchor="center"
offset={64}
SnackbarProps={{ autoHideDuration: null }}
/> position="bottom-right"
offset={24}
icon={ }
/>
`$3
Use as props
position, anchor e offset para evitar colisões com footers fixos, chat widgets e outros elementos flutuantes:`tsx
categories={{ enabledCategories: ['analytics'] }}
cookieBannerProps={{
position: 'bottom',
anchor: 'center',
offset: 72 // ajuste conforme necessário
}}
floatingPreferencesButtonProps={{
position: 'bottom-right',
offset: 96
}}
/>
`Para bloquear navegação até a decisão, use
blockingMode="hard" no provider:`tsx
categories={{ enabledCategories: ['analytics'] }}
blocking
blockingMode="hard"
blockingStrategy="provider"
/>
`📚 Documentação
- Documentação Principal
- Storybook (Componentes Interativos)
- Guia de Início Rápido
🔗 Pacotes Relacionados
@react-lgpd-consent/core - Núcleo sem dependências de UI
- react-lgpd-consent` - Pacote agregador (core + mui)MIT © Luciano Édipo