Hooks

useTranslations

useTranslations() returns the Translations object for the currently active language. Use it when building custom consent UI that needs translated text.

import { useTranslations } from '@c15t/nextjs';

function CustomBanner() {
  const translations = useTranslations();

  return (
    <div>
      <h2>{translations.cookieBanner.title}</h2>
      <p>{translations.cookieBanner.description}</p>
      <button>{translations.common.acceptAll}</button>
      <button>{translations.common.rejectAll}</button>
    </div>
  );
}

Translation Sections

The returned Translations object has these sections:

Warning: ExtractedTypeTable: Could not extract "Translations" from "./packages/translations/src/types.ts" using base path "/vercel/path0/apps/c15t-docs/.leadtype/c15t". Verify the path/name and that the file is included by your tsconfig.

Loading…

With setLanguage

Translations update automatically when the language changes:

import { useConsentManager, useTranslations } from '@c15t/nextjs';

function LocalizedConsent() {
  const { setLanguage } = useConsentManager();
  const translations = useTranslations();

  return (
    <div>
      <p>{translations.cookieBanner.description}</p>
      <button onClick={() => setLanguage('de')}>Deutsch</button>
      <button onClick={() => setLanguage('fr')}>Français</button>
    </div>
  );
}