---
title: useTranslations
description: Access the current language's translations for building custom consent UI.
---
`useTranslations()` returns the `Translations` object for the currently active language. Use it when building custom consent UI that needs translated text.

```tsx
import { useTranslations } from '@c15t/react';

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:

### Translations

|Property|Type|Description|Default|Required|
|:--|:--|:--|:--|:--:|
|common|CommonTranslations|-|-|✅ Required|
|cookieBanner|CookieBannerTranslations|-|-|✅ Required|
|consentManagerDialog|ConsentManagerDialogTranslations|-|-|✅ Required|
|consentTypes|Object \|undefined|-|-|✅ Required|
|frame|FrameTranslations \|undefined|-|-|Optional|
|legalLinks|LegalLinksTranslations \|undefined|-|-|Optional|
|iab|Object \|undefined|-|-|Optional|

#### `common` CommonTranslations

|Property|Type|Description|Default|Required|
|:--|:--|:--|:--|:--:|
|acceptAll|string \|undefined|-|-|✅ Required|
|rejectAll|string \|undefined|-|-|✅ Required|
|customize|string \|undefined|-|-|✅ Required|
|save|string \|undefined|-|-|✅ Required|
|close|string \|undefined|-|-|✅ Required|
|securedBy|string \|undefined|-|-|✅ Required|

#### `cookieBanner` CookieBannerTranslations

|Property|Type|Description|Default|Required|
|:--|:--|:--|:--|:--:|
|title|string \|undefined|-|-|✅ Required|
|description|string \|undefined|-|-|✅ Required|

#### `consentManagerDialog` ConsentManagerDialogTranslations

|Property|Type|Description|Default|Required|
|:--|:--|:--|:--|:--:|
|title|string \|undefined|-|-|✅ Required|
|description|string \|undefined|-|-|✅ Required|

#### `consentTypes`

|Property|Type|Description|Default|Required|
|:--|:--|:--|:--|:--:|
|experience|ConsentTypeTranslations \|undefined|-|-|✅ Required|
|functionality|ConsentTypeTranslations \|undefined|-|-|✅ Required|
|marketing|ConsentTypeTranslations \|undefined|-|-|✅ Required|
|measurement|ConsentTypeTranslations \|undefined|-|-|✅ Required|
|necessary|ConsentTypeTranslations \|undefined|-|-|✅ Required|

#### `frame` FrameTranslations

|Property|Type|Description|Default|Required|
|:--|:--|:--|:--|:--:|
|title|string \|undefined|You can use the \{category} placeholder to dynamically insert the consent category name.|-|✅ Required|
|actionButton|string \|undefined|You can use the \{category} placeholder to dynamically insert the consent category name.|-|✅ Required|
|policyBlocked|string \|undefined|Message shown when the frame category is blocked by active policy scope.|-|✅ Required|

#### `legalLinks` LegalLinksTranslations

|Property|Type|Description|Default|Required|
|:--|:--|:--|:--|:--:|
|privacyPolicy|string \|undefined|-|-|✅ Required|
|cookiePolicy|string \|undefined|-|-|✅ Required|
|termsOfService|string \|undefined|-|-|✅ Required|

#### `iab`

|Property|Type|Description|Default|Required|
|:--|:--|:--|:--|:--:|
|banner|DeepPartial\<IABBannerTranslations> \|undefined|-|-|✅ Required|
|preferenceCenter|DeepPartial\<IABPreferenceCenterTranslations> \|undefined|-|-|✅ Required|
|common|DeepPartial\<IABCommonTranslations> \|undefined|-|-|✅ Required|

## With setLanguage

Translations update automatically when the language changes:

```tsx
import { useConsentManager, useTranslations } from '@c15t/react';

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>
  );
}
```