Overview

As an alternative to the <T> component, dictionaries are a way to translate content in General Translation. Contrary to to the <T> component, dictionaries store all translations in a single file, in a key-value format.

There are a few advantages to using dictionaries over the <T> component:

1. Centralized Storage: Dictionaries store all translatable content in a single file, making it easier to manage and update.
2. Historical Precedent: The dictionary pattern is a common design pattern in the industry and is used by many other libraries.

At the same time, it has some disadvantages as well:

1. Complexity: Dictionaries are more complex to set up and use than the <T> component.
2. Readability: Dictionaries are less readable than the <T> component because the content is not inline.

Both design patterns are supported by our library and are not mutually exclusive. You can use a dictionary alongside <T> components.

Here is an example of a dictionary:

const dictionary = {
  greetings: {
    hello: <>Hello, World!</>, // JSX content
    goodbye: 'Goodbye, World!'  // string content
  },
} 
export default dictionary;

Here's how you would use the dictionary in a component:

"use client";
import { useGT } from 'gt-next/client';
 
export default function MyComponent() {
 
const { t } = useGT(); // on the client side, you use the useGT hook
 
return (
  <GTProvider>
    <div>
      {t('greetings.hello')}
    </div>
  </GTProvider>
);
}

To learn more, see the specific reference for the corresponding framework:

• Next.js
• React