Propriedades do provider (estende ConsentProviderCoreProps)
Elemento React contendo o provider de contexto e componentes UI integrados
Este componente é um wrapper sobre o ConsentProvider do core que automaticamente
injeta PreferencesModal, CookieBanner e FloatingPreferencesButton com estilos MUI,
tornando o setup extremamente simples e rápido.
theme prop para customização de cores e tipografia*Componentdisable* para controle granular de UI| Recurso | MUI Provider | Core Provider |
|---|---|---|
| Modal padrão | ✅ Automático | ❌ Manual |
| Banner padrão | ✅ Automático | ❌ Manual |
| Botão flutuante | ✅ Automático | ❌ Manual |
| Suporte a tema MUI | ✅ Sim | ❌ Não |
| Tamanho bundle | ~104KB | ~86KB |
| Headless | Via disable* |
✅ Nativo |
ConsentProviderCore
└─ ThemeProvider (se theme fornecido)
├─ children (sua aplicação)
├─ CookieBanner (se não desabilitado e sem consentimento)
├─ PreferencesModal (se não desabilitado e preferências abertas)
└─ FloatingPreferencesButton (se não desabilitado)
import { ConsentProvider } from '@react-lgpd-consent/mui'
function App() {
return (
<ConsentProvider
categories={{
enabledCategories: ['analytics', 'marketing']
}}
>
<YourApp />
</ConsentProvider>
)
}
import { createTheme } from '@mui/material/styles'
import { ConsentProvider } from '@react-lgpd-consent/mui'
const theme = createTheme({
palette: {
primary: { main: '#2e7d32' },
background: { paper: '#fafafa' }
}
})
function App() {
return (
<ConsentProvider
theme={theme}
categories={{ enabledCategories: ['analytics'] }}
>
<YourApp />
</ConsentProvider>
)
}
import { ConsentProvider, PreferencesModal } from '@react-lgpd-consent/mui'
function App() {
return (
<ConsentProvider
categories={{ enabledCategories: ['analytics'] }}
PreferencesModalComponent={(props) => (
<PreferencesModal {...props} hideBranding={true} />
)}
CookieBannerComponent={() => <div>Meu banner customizado</div>}
>
<YourApp />
</ConsentProvider>
)
}
import { ConsentProvider } from '@react-lgpd-consent/mui'
import { useConsent } from '@react-lgpd-consent/core'
function CustomUI() {
const { acceptAll, rejectAll } = useConsent()
return <div>Minha UI totalmente customizada</div>
}
function App() {
return (
<ConsentProvider
categories={{ enabledCategories: ['analytics'] }}
disableDefaultModal={true}
disableDefaultBanner={true}
disableDefaultFloatingButton={true}
>
<CustomUI />
<YourApp />
</ConsentProvider>
)
}
function App() {
return (
<ConsentProvider
categories={{ enabledCategories: ['analytics', 'marketing'] }}
onConsentChange={(newState) => {
console.log('Novo estado:', newState)
// Enviar evento para analytics
}}
onPreferencesOpen={() => console.log('Modal aberto')}
onPreferencesClose={() => console.log('Modal fechado')}
>
<YourApp />
</ConsentProvider>
)
}
Provider de consentimento com componentes Material-UI integrados ("batteries included").