react-lgpd-consent - v0.5.4
    Preparing search index...

    Variable FloatingPreferencesButtonConst

    FloatingPreferencesButton: MemoExoticComponent<
        (props: Readonly<FloatingPreferencesButtonProps>) => Element | null,
    > = ...

    Botão flutuante (FAB) para reabrir o modal de preferências de consentimento LGPD.

    Components

    0.3.0

    Este componente fornece acesso rápido e sempre visível às preferências de consentimento, permitindo que usuários revisem e alterem suas escolhas a qualquer momento.

    O botão é renderizado automaticamente pelo ConsentProvider após o consentimento inicial, a menos que desabilitado via disableFloatingPreferencesButton={true}.

    • Posição fixa: Permanece visível durante scroll
    • Z-index 1200: Fica acima do conteúdo normal, abaixo de modais
    • Tooltip acessível: ARIA label e tooltip ao hover
    • Responsivo: Funciona em mobile e desktop
    • Transições suaves: Animação de cor ao hover via tema MUI
    • Design tokens: Respeita cores customizadas do contexto

    Você pode:

    • Alterar posição e offset
    • Trocar o ícone padrão (cookie)
    • Modificar tooltip
    • Ocultar quando já consentido
    • Passar props customizadas para o Fab do MUI

    Para controle total, passe seu próprio componente:

    function MyCustomButton() {
    const { openPreferences } = useConsent()
    return <button onClick={openPreferences}>Preferências</button>
    }

    <ConsentProvider
    FloatingPreferencesButtonComponent={MyCustomButton}
    >
    <App />
    </ConsentProvider>

    Propriedades para customizar o botão (tipado via FloatingPreferencesButtonProps)

    Elemento JSX do botão flutuante ou null se oculto

    Se usado fora do ConsentProvider (contexto não disponível)

    // ConsentProvider já renderiza FloatingPreferencesButton automaticamente
    <ConsentProvider categories={{ enabledCategories: ['analytics'] }}>
    <App />
    </ConsentProvider>
    <ConsentProvider
    categories={{ enabledCategories: ['analytics'] }}
    floatingPreferencesButtonProps={{
    position: 'bottom-left',
    offset: 16,
    hideWhenConsented: true
    }}
    >
    <App />
    </ConsentProvider>
    import SettingsIcon from '@mui/icons-material/Settings'

    function App() {
    return (
    <FloatingPreferencesButton
    position="top-right"
    icon={<SettingsIcon />}
    tooltip="Configurações de Privacidade"
    FabProps={{
    size: 'large',
    color: 'secondary'
    }}
    />
    )
    }
    <ConsentProvider
    categories={{ enabledCategories: ['analytics'] }}
    disableFloatingPreferencesButton={true}
    >
    <App />
    </ConsentProvider>