---
id: translation_context
sidebar_position: 9
title: 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'    |
