What is Tolgee for React?
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! ๐ฏ๐ต ๐ฐ๐ท ๐ฉ๐ช ๐จ๐ณ ๐บ๐ธ ๐ซ๐ท ๐ช๐ธ ๐ฎ๐น ๐ท๐บ ๐ฌ๐ง
Quick links
Installation
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>
Usage
![react-infinite](https://user-images.githubusercontent.com/18496315/137308502-844f5ccf-1895-414d-bf40-6707cb691853.gif)
To translate texts using Tolgee React integration, you can use T
component or useTranslate
hook.
T component
import { T } from "@tolgee/react";
...
<T>translation_key</T>
or
<T keyName="translation_key">Default value</T>
useTranslate hook
import { useTranslate } from "@tolgee/react";
...
const { t } = useTranslate();
...
t("key_to_translate")
Prerequisites
- You have some React-based project
- You have generated an API key from Tolgee Cloud or a self-hosted Tolgee instance.
Why to use Tolgee?
Because it saves a lot of time, you would spend on localization tasks without it. Because it enables you to provide perfectly translated software.
Features
- 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
Development
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.
Testing
To run Jest tests of this package, execute
npm run test
In the /packages/react
directory.
End-to-end (e2e) testing
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
Contributors