Tolgee for React
The Tolgee i18n SDK for React
Tolgee is an open-source alternative to Crowdin, Phrase, or Lokalise with its very own revolutionary integrations.
Become part of the family. Join slack channel
React integration library of Tolgee. This package makes it super simple to add i18n to your React app! For more information about using Tolgee with React, visit the docs 📖.
Localize (translate) your CRA, Next.js, or other React projects to multiple languages with Tolgee. Integration of Tolgee is extremely simple! 🇯🇵 🇰🇷 🇩🇪 🇨🇳 🇺🇸 🇫🇷 🇪🇸 🇮🇹 🇷🇺 🇬🇧
- Tolgee for React docs
- Tolgee JS SDK docs
-
Tolgee Website
- Product (Learn more about the great features)
- Tolgee platform docs
npm install @tolgee/react
Then use the library in your app:
import { TolgeeProvider, ReactPlugin, FormatSimple } from "@tolgee/react";
const tolgee = Tolgee()
.use(ReactPlugin())
.use(FormatSimple())
.init({
language: 'en',
apiUrl: process.env.REACT_APP_TOLGEE_API_URL,
apiKey: process.env.REACT_APP_TOLGEE_API_KEY
});
<TolgeeProvider
tolgee={tolgee}
>
<Your app components>
</TolgeeProvider>
To translate texts using Tolgee React integration, you can use T
component or useTranslate
hook.
import { T } from "@tolgee/react";
...
<T>translation_key</T>
or
<T keyName="translation_key">Default value</T>
import { useTranslate } from "@tolgee/react";
...
const { t } = useTranslate();
...
t("key_to_translate")
- You have some React-based project
- You have generated an API key from Tolgee Cloud or a self-hosted Tolgee instance.
Because it saves a lot of time, you would spend on localization tasks without it. Because it enables you to provide perfectly translated software.
- All-in-one localization solution for your JS application 🙌
- Out-of-box in-context localization 🎉
- Automated screenshot generation 📷
- Translation management platform 🎈
- Open-source 🔥
Read more on the Tolgee website
We welcome your PRs.
To develop the package locally:
- Clone the repository
- Install the packages in the repository root
pnpm install
- Run the development script
pnpm develop:react
This runs the development suite of this monorepo for the react
integration. The changes in each dependency package are
automatically built and propagated to the test application, which you can open and play within the browser.
To run Jest tests of this package, execute
npm run test
In the /packages/react
directory.
To run the e2e tests, simply execute
pnpm run e2e run react
To open and play with e2e tests, run:
pnpm run e2e open react