@react-lgpd-consent/mui

> Componentes Material-UI para react-lgpd-consent - UI pronta para usar


📦 Sobre

O pacote @react-lgpd-consent/mui fornece componentes visuais prontos para uso baseados em Material-UI para a biblioteca react-lgpd-consent.

$3

- ✅ Aplicações que já usam Material-UI
- ✅ Desenvolvimento rápido com componentes prontos
- ✅ Customização via theme do Material-UI
- ✅ Experiência consistente com Material Design

📥 Instalação

``bash
npm install @react-lgpd-consent/mui @mui/material @mui/icons-material


ou


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

$3

- @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.

🚀 Uso Básico

`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!

$3

`tsx
import { ConsentProvider, PreferencesModal } from '@react-lgpd-consent/mui'

function App() {
return (
categories={{ enabledCategories: ['analytics'] }}
PreferencesModalComponent={(props) => (

)}
>


)
}
`

🆕 Novidades v0.7.0

$3

Monitore eventos para auditoria:

`tsx
import { ConsentProvider } from '@react-lgpd-consent/mui'

onConsentInit={(state) => console.log('Inicializado:', state)}
onConsentChange={(current, prev) => console.log('Mudou:', current)}
onAuditLog={(entry) => {
fetch('/api/audit', { method: 'POST', body: JSON.stringify(entry) })
}}
>
`

$3

`tsx
import { createAnpdCategoriesConfig } from '@react-lgpd-consent/mui'

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


`

📖 Documentação completa: API.md | TROUBLESHOOTING.md

---

$3

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ável

Nota: 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)

📄 Licença

MIT © Luciano Édipo