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

Ideal para:

• ✅ 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

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

🚀 Uso Básico

import { 
  ConsentProvider, 
  CookieBanner, 
  FloatingPreferencesButton 
} from '@react-lgpd-consent/mui'

function App() {
  return (
    <ConsentProvider categories={{ enabledCategories: ['analytics', 'marketing'] }}>
      <CookieBanner policyLinkUrl="/privacy-policy" />
      <FloatingPreferencesButton />
      {/* O PreferencesModal é injetado automaticamente! */}
      <YourApp />
    </ConsentProvider>
  )
}

✨ Nota: O ConsentProvider deste pacote automaticamente renderiza o PreferencesModal. Você não precisa incluí-lo manualmente!

Customizando o Modal de Preferências

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

function App() {
  return (
    <ConsentProvider
      categories={{ enabledCategories: ['analytics'] }}
      PreferencesModalComponent={(props) => (
        <PreferencesModal {...props} hideBranding={true} />
      )}
    >
      <YourApp />
    </ConsentProvider>
  )
}

Uso Headless (Avançado)

Se você quiser controle total sobre a UI:

import { ConsentProviderHeadless, useConsent } from '@react-lgpd-consent/mui'

function App() {
  return (
    <ConsentProviderHeadless categories={{ enabledCategories: ['analytics'] }}>
      <CustomUI />
    </ConsentProviderHeadless>
  )
}

function CustomUI() {
  const { acceptAll, rejectAll } = useConsent()
  return (
    <div>
      <button onClick={acceptAll}>Aceitar</button>
      <button onClick={rejectAll}>Rejeitar</button>
    </div>
  )
}

🎯 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

<CookieBanner
  blocking={true}
  policyLinkUrl="/privacy"
  SnackbarProps={{ anchorOrigin: { vertical: 'top', horizontal: 'center' } }}
/>

<FloatingPreferencesButton
  position="bottom-right"
  offset={24}
  icon={<CustomIcon />}
/>

📚 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