Propriedades para customizar o modal (tipado via PreferencesModalProps)
Elemento JSX do modal de preferências ou null se não deve ser exibido
O PreferencesModal é o componente de UI que apresenta uma interface detalhada
para o usuário gerenciar suas preferências de consentimento categoria por categoria.
Este modal é renderizado automaticamente pelo ConsentProvider quando o usuário
clica para gerenciar preferências. Não é necessário renderizá-lo manualmente,
a menos que deseje controle total sobre o comportamento.
Você pode substituir este componente passando seu próprio para a prop
PreferencesModalComponent no ConsentProvider:
function MyCustomModal() {
const { preferences, setPreferences, closePreferences } = useConsent()
return <div>Meu modal customizado</div>
}
<ConsentProvider
PreferencesModalComponent={MyCustomModal}
categories={{ enabledCategories: ['analytics'] }}
>
<App />
</ConsentProvider>
O modal exibe automaticamente:
Estas informações vêm das integrações ativas (via getCookiesInfoForCategory)
e das categorias configuradas no Provider.
// ConsentProvider já renderiza PreferencesModal automaticamente
function App() {
return (
<ConsentProvider categories={{ enabledCategories: ['analytics'] }}>
<YourApp />
</ConsentProvider>
)
}
<ConsentProvider
categories={{ enabledCategories: ['analytics', 'marketing'] }}
preferencesModalProps={{
hideBranding: true,
DialogProps: {
maxWidth: 'md',
fullWidth: true
}
}}
>
<App />
</ConsentProvider>
function CustomApp() {
const [open, setOpen] = useState(false)
const { preferences, setPreferences } = useConsent()
return (
<>
<button onClick={() => setOpen(true)}>Abrir Preferências</button>
<PreferencesModal
isModalOpen={open}
preferences={preferences}
setPreferences={setPreferences}
closePreferences={() => setOpen(false)}
DialogProps={{ maxWidth: 'lg' }}
/>
</>
)
}
Modal de preferências de consentimento LGPD que permite ao usuário ajustar suas escolhas.