Function useConsent

Hook para acessar e manipular o estado de consentimento do usuário.

Returns

Estado e métodos para consentimento.

Hook principal para acessar e manipular o estado de consentimento de cookies LGPD.

Returns ConsentContextValue

Um objeto contendo o estado completo e as ações de consentimento

Remarks

Este é o hook mais importante da biblioteca para interagir com o sistema de consentimento. Ele provê acesso completo ao estado atual do consentimento e às funções para modificar esse estado.

Estado Disponível

consented: boolean - Indica se o usuário já deu alguma resposta (aceitar/rejeitar)
preferences: CategoryPreferences - Objeto com estado de cada categoria de cookie
isModalOpen: boolean - Indica se o modal de preferências está aberto

Ações Disponíveis

acceptAll(): Aceita todas as categorias configuradas
rejectAll(): Rejeita todas as categorias (exceto necessary)
setPreference(category, enabled): Define uma categoria específica
setPreferences(preferences): Define múltiplas categorias de uma vez
openPreferences(): Abre o modal de preferências
closePreferences(): Fecha o modal de preferências
resetConsent(): Limpa all consentimento (volta ao estado inicial)

Performance e SSR

O hook é otimizado com useMemo interno para evitar re-renders desnecessários
Compatível com SSR (Next.js, Remix) - estado é hidratado após montagem no cliente
Estado inicial é sempre { consented: false } no servidor para evitar hydration mismatches

Integração com Scripts

Use junto com ConsentScriptLoader para carregamento condicional de scripts
Estado preferences pode ser usado para ativar/desativar recursos condicionalmente
Mudanças no consentimento são automaticamente persistidas em cookies

Throws

Se usado fora do ConsentProvider - verifique se o componente está dentro de <ConsentProvider>

Example: Hook básico para verificar consentimento

function MyComponent() {
  const { consented, preferences, acceptAll, rejectAll } = useConsent();

  if (!consented) {
    return <p>Aguardando decisão do usuário...</p>;
  }

  return (
    <div>
      <p>Analytics: {preferences.analytics ? 'Ativo' : 'Inativo'}</p>
      <button onClick={rejectAll}>Rejeitar Todos</button>
    </div>
  );
}

Example: Controle granular de categorias

function AdvancedSettings() {
  const { preferences, setPreference } = useConsent();

  return (
    <div>
      <label>
        <input
          type="checkbox"
          checked={preferences.marketing}
          onChange={(e) => setPreference('marketing', e.target.checked)}
        />
        Cookies de Marketing
      </label>
    </div>
  );
}

Example: Integração condicional com Google Analytics

function AnalyticsComponent() {
  const { consented, preferences } = useConsent();

  React.useEffect(() => {
    if (consented && preferences.analytics) {
      // Inicializar Google Analytics
      gtag('config', 'GA_MEASUREMENT_ID');
      gtag('event', 'consent_granted', {
        ad_storage: preferences.marketing ? 'granted' : 'denied',
        analytics_storage: 'granted'
      });
    }
  }, [consented, preferences]);

  return null; // Componente só para lógica
}

Example: Uso avançado com múltiplas preferências

function BulkPreferencesControl() {
  const { setPreferences, preferences, consented } = useConsent();

  const handleSavePreferences = () => {
    setPreferences({
      necessary: true,    // Sempre true
      analytics: true,
      marketing: false,
      functional: true,
      performance: false
    });
  };

  return (
    <button onClick={handleSavePreferences} disabled={!consented}>
      Salvar Minhas Preferências
    </button>
  );
}

Example: Componente com estado de carregamento

function ConsentAwareFeature() {
  const { consented, preferences } = useConsent();
  const canShowFeature = consented && preferences.functional;

  if (!consented) {
    return <div>⏳ Aguardando decisão sobre cookies...</div>;
  }

  if (!preferences.functional) {
    return (
      <div>
        ❌ Este recurso requer cookies funcionais.
        <button onClick={() => window.openPreferencesModal?.()}>
          Alterar Preferências
        </button>
      </div>
    );
  }

  return <div>✅ Recurso ativo com consentimento!</div>;
}

See

ConsentProvider - Provider que deve envolver os componentes
ConsentContextValue - Tipo do valor retornado

Since

0.1.0