---
title: useTranslate
slug: oms/usetranslate
docTags: 
createdAt: 2022-11-07T21:31:40.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

```javascript
import { useTranslate } from '~/hooks/actions'

// inside a function component
const translate = useTranslate()
```

## 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:**

```javascript
import { useTranslate } from '~/hooks/actions'

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

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

```javascript
// /src/intl/en-US.json

{  
  "site": {    
    "title": "My Site"  
  }
}
```