Hook para verificar se a hidratação do estado de consentimento foi concluída.
true se a hidratação do cookie foi concluída, false durante SSR ou antes da hidratação
Em aplicações com Server-Side Rendering (SSR) como Next.js, o estado inicial
é sempre false no servidor para evitar diferenças de hidratação. Este hook
permite saber quando a biblioteca já leu o cookie do navegador e atualizou
o estado, evitando o "flash" do banner ou comportamentos inconsistentes.
falsefalse até o useEffect ler o cookietrue permanentementetrue)function App() {
const { consented } = useConsent();
const isHydrated = useConsentHydration();
// Não mostrar nada até hidratar
if (!isHydrated) {
return <div>Carregando...</div>;
}
return (
<div>
{!consented && <span>Banner aparecerá agora</span>}
</div>
);
}
function Analytics() {
const { preferences } = useConsent();
const isHydrated = useConsentHydration();
React.useEffect(() => {
if (isHydrated && preferences.analytics) {
// Só carrega analytics após hidratação
loadGoogleAnalytics();
}
}, [isHydrated, preferences.analytics]);
return null;
}
function ConsentDependentFeature() {
const { consented, preferences } = useConsent();
const isHydrated = useConsentHydration();
// Estados de loading
if (!isHydrated) {
return <div className="shimmer">Carregando preferências...</div>;
}
// Estado não consentido
if (!consented) {
return (
<div className="consent-required">
<p>Configure suas preferências de cookies para usar este recurso.</p>
</div>
);
}
// Estado com consentimento específico
if (!preferences.functional) {
return (
<div className="consent-partial">
<p>Este recurso requer cookies funcionais.</p>
<button onClick={() => window.openPreferencesModal?.()}>
Alterar Preferências
</button>
</div>
);
}
return <div>🚀 Recurso funcionando com consentimento!</div>;
}
// pages/_app.tsx
function MyApp(props: any) {
const isHydrated = useConsentHydration();
// Só renderiza componentes de consentimento após hidratação
// para evitar diferenças entre servidor e cliente
return (
// ConsentProvider envolve tudo
// Component com props normalmente
// CookieBanner só se isHydrated for true
// FloatingPreferencesButton só se isHydrated for true
);
}
function useConsentAwareFeature(requiredCategory: string) {
const { consented, preferences } = useConsent();
const isHydrated = useConsentHydration();
const isEnabled = React.useMemo(() => {
if (!isHydrated) return false; // Loading
if (!consented) return false; // No consent
return preferences[requiredCategory] === true;
}, [isHydrated, consented, preferences, requiredCategory]);
return {
isEnabled,
isLoading: !isHydrated,
hasConsented: consented,
preferences
};
}
// Uso do hook customizado
function MyFeature() {
const { isEnabled, isLoading } = useConsentAwareFeature('analytics');
if (isLoading) return <Skeleton />;
if (!isEnabled) return <ConsentRequired />;
return <AnalyticsChart />;
}
ConsentProvider - Para configuração SSR
Hook para acessar e manipular o estado de consentimento do usuário.
Returns
Estado e métodos para consentimento.