---
title: useTranslate
slug: oms/i2ih-usetranslate
docTags: 
createdAt: 2022-11-08T14:20:24.000Z
---

The `useTranslate` hook provides support for internationalization, powered by [`react-intl`](https://formatjs.io/docs/getting-started/installation/).

To localize the text in your React components, use the `translate` function returned by the `useTranslate` hook. `translate` will load the specified string from your language resource file.

We recommend using `translate` even if your site currently only supports one language. It's easier to edit your website text if it's all in a single configuration file, and it makes it trivial to add multi-language support in the future.

## Example

::::CodeDrawer{title="useTranslate" isResponseExpanded="false" autoGeneratedAnchorSlug="usetranslate" legacyHash="PzDS9PCZ0fPBiKmCF8QgN"}
:::CodeblockTabsExamples
```javascript
import { useTranslate } from '~/hooks/actions'

export default () => {  
  const { translate } = useTranslate()
  
  return <h1>{translate('site.title')}</h1>
}
```
:::

:::CodeblockTabsResponses
```javascript
```
:::
::::

## Returns

The `useTranslate` hook returns a `translate` function:

### translate

**Arguments:**

`translate(id, values)`

| Argument  | Type   | Description                                 |
| --------- | ------ | ------------------------------------------- |
| `id`      | String | A key in your language resource file.       |
| `values?` | Object | (Optional) Values for string interpolation. |

**Example:**

::::CodeDrawer{title="translate" isResponseExpanded="false" autoGeneratedAnchorSlug="translate-1" legacyHash="XlbIGkzMxnm_eli0XQPMB"}
:::CodeblockTabsExamples
```javascript
import { useTranslate } from '~/hooks/actions'

export default () => {  
  const { translate } = useTranslate()
  
  return <h1>{translate('site.title')}</h1>
}
```
:::

:::CodeblockTabsResponses
```javascript
```
:::
::::

The component above assumes there is a file at `/src/intl/<language>.json` that looks like this:

::::CodeDrawer{title="en-US.json" isResponseExpanded="false" autoGeneratedAnchorSlug="en-usjson" legacyHash="l2Q-Ky4J3uCHzjfK15cTf"}
:::CodeblockTabsExamples
```json
{  
  "site": {    
    "title": "My Site"  
  }
}
```
:::

:::CodeblockTabsResponses
```javascript
```
:::
::::