Website logo
Navigate through spaces
⌘K
OVERVIEW
ORDER MANAGEMENT (OMS)
CONTENT MANAGEMENT (CMS)
DATA
CUSTOMER LIFETIME REVENUE
Customer Lifetime Revenue Explanation
Customer Lifetime Revenue and Purchase Likelihood
Recency Frequency and Monetary
CLR and RFM Data Table Glossary
RFM and CLR in the Hub
LOOKER
Modifying a Dashboard
Timestamp differences between Looker, OMS and Shopify
How to create custom calculations in Looker
Looker and Shopify data models
Custom fields
How to 'Save and Schedule' reports
Creating Custom Reports or Look
Looks vs Dashboards
Login Looker FAQ
Looker Glossary
SEGMENT EVENT TRACKING
What are event tracking
Adding Tracking
What is the Tracking Plan?
The Chord Tracking Plan
The Shopify Tracking Plan
Event Tracking FAQ
EVENT UPDATES PAGE
Email Subscription Payment Event Update
Product Feed Setup
Getting Segment to Production
Consent Management
Installing in Next.js
Installing in Gatsby
Integrations
👩‍💻Developer Tools
Using Chord with Shopify
Docs powered by Archbee
Developer Tools
...
Next.js
SDK Reference

useTranslate

4min

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.

Example

JS
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:

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




Updated 03 Mar 2023
Did this page help you?
PREVIOUS
useSquareCheckout
NEXT
useUser
Docs powered by Archbee
TABLE OF CONTENTS
Example
Returns
translate
Docs powered by Archbee