---
title: useTranslate
slug: oms/sSEL-usetranslate
docTags: 
createdAt: 2022-11-07T21:27:00.000Z
---

:::hint{type="info"}
**This page's documentation only applies to Chord's** [Next.js starter](https://github.com/chordcommerce/nextjs-starter-autonomy) **prior to the release of the **[React](docId\:EwXkRz0JhH0zPphIkkcrI)**. The Next.js starter now uses the React SDK and does not use the methods documented on this page. Check out the** [React SDK Reference](https://docs-beta.chord.co/chord-ui/module-react-autonomy) **for complete documentation, and the **[React SDK Migration Guide](docId\:qMilHJFPz9WbJYZbe50Ku)**for details on how to upgrade.**
:::

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"  
  }
}
```