Translating Strings

Overview

This guide is a step by step tutorial on how to translate strings in your React app with useGT().

Setup

Prerequisites

We assume that you already have installed gt-react in your project and have followed or are currently following the Quick Start Guide.

Translating Strings

For any strings, use useGT(). Remember that useGT() must be called within a child component of <GTProvider>.

import { useGT } from 'gt-react';
 
export default function MyComponent() {
  const t = useGT(); 
  return (
    <div>
      <h1>{t('This is a string that gets translated')}</h1>
    </div>
  );
}

Adding Variables

Variables are values that may change, but do not get translated. To add variables to your strings, use the following pattern:

import { useGT } from 'gt-react';
 
export default function MyComponent() {
  const t = useGT(); 
  return (
    <div>
      <h1>{t('Hello there, {username}', { variables: { username: 'Brian123' }})}</h1>
    </div>
  );
}

Notes

• For string translation, use useGT().
• Variables can be added to strings using the { variables: { key: value } } pattern.

Next Steps

• Return to the Quick Start Guide to finish setting up your project for translation.
• See the API reference for useGT().