# TranslationContext

The component library uses the [`i18next`](https://www.npmjs.com/package/i18next) dependency to create a `Streami18n`
class constructor that handles language translation. The `TranslationContext` stores the resulting values and allows
children of the `Chat` component to auto translate library text based on the connected user's set languages.
You can access the context values by calling the `useTranslationContext` custom hook.

## Basic Usage

Pull values from context with our custom hook:

```jsx
const { t } = useTranslationContext();

<div className="message">{t("This message will be translated.")}</div>;
```

## Values

### t

Function that translates text into the connected user's set language.

| Type     |
| -------- |
| function |

### tDateTimeParser

Function that parses date times.

| Type     | Default |
| -------- | ------- |
| function | Day.js  |

### userLanguage

Value to set the connected user's language (ex: 'en', 'fr', 'ru', etc), which auto translates text fields in the library.

| Type   | Default |
| ------ | ------- |
| string | 'en'    |

---

This page was last updated at 2025-08-15T14:16:07.561Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/components/contexts/translation_context/](https://getstream.io/chat/docs/sdk/react/components/contexts/translation_context/).