gt-react is a powerful internationalization library designed for React applications. It replaces your existing localization library, and integrates with generaltranslation.com for translations.
See our docs for more information including guides, examples, and API references.
Install gt-react
via npm:
npm install gt-react
npm install gt-react-cli --save-dev
Add the following environment variables to your .env
file:
GT_API_KEY="your-api-key"
GT_PROJECT_ID="your-project-id"
- Get your
API Key
andProject ID
from the General Translation Dashboard.
<GTProvider>
is used to configure the behavior of gt-react
.
It should be placed as high up in your app as possible, ideally at the root.
Just pass a list of locale codes to add them to your app.
import { GTProvider } from "gt-react";
import MyApp from "./MyApp";
export default function App() {
return (
<GTProvider locales={['fr', 'zh']}> // French and Chinese support
<MyApp />
</GTProvider>
);
}
Wrap any nested JSX content in the <T>
component to make it translatable.
For more information, check out the guide on using <T>
components.
import { T } from "gt-react";
export default function Example() {
return (
<T>
<p>
This gets translated.
</p>
</T>
);
}
Use the <Var>
component to designate JSX content that should not be translated.
import { T, Var } from "gt-react";
export default function Example() {
return (
<T>
<p>
This gets translated. <Var>This does not.</Var>
</p>
</T>
);
}
Tip:
To save time, run the setup command.
It will scan your codebase for translatable JSX and insert the <T>
tags for you.
npx gt-react-cli setup
Strings:
For strings, you can use useGT()
for translation.
For more information, check out this guide.
import { useGT } from "gt-react";
export default function Example() {
const t = useGT();
return (
<p>
{t("This gets translated.")}
</p>
);
}
Full documentation, including guides, examples, and API references, can be found at General Translation Docs.
We welcome any contributions to our libraries. Please submit a pull request!