useTranslate

6min

This page's documentation only applies to Chord's Next.js starter prior to the release of the ﻿React. 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 for complete documentation, and the ﻿React SDK Migration Guidefor details on how to upgrade.
The useTranslate hook provides support for internationalization, powered by react-intl.
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.
ExampleJS
|
import { useTranslate } from '~/hooks/actions'

// inside a function component
const translate = useTranslate()
import { useTranslate } from '~/hooks/actions'

// inside a function component
const translate = useTranslate()
﻿
ReturnsThe useTranslate hook returns a translate function:
translateArguments:
translate(id, values)
Argument
Type
Description
id
String
A key in your language resource file.
values?
Object
(Optional) Values for string interpolation.
Example:
JS
|
import { useTranslate } from '~/hooks/actions'

export default () => {  
  const { translate } = useTranslate()
  
  return <h1>{translate('site.title')}</h1>
}
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:
JS
|
// /src/intl/en-US.json

{  
  "site": {    
    "title": "My Site"  
  }
}
// /src/intl/en-US.json

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

Updated 03 Mar 2023

Did this page help you?

Yes

useSquareCheckout

useUser

Docs powered by archbee

TABLE OF CONTENTS

Example

Returns

translate

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