README
Tolgee for React
React integration library of Tolgee. For more information about using Tolgee with React, visit our documentation website 📖.
Lokalize (translate) your CRA, Gatsby, Next.js or other React projects to multiple languages with Tolgee. Integration of Tolgee is extremely simple! 🇯🇵 🇰🇷 🇩🇪 🇨🇳 🇺🇸 🇫🇷 🇪🇸 🇮🇹 🇷🇺 🇬🇧
Features
- All in One localization solution for your JS application 🙌
- Out of box in-context localization 🎉
- Automated screenshot generation 📷
- Translation management platform 🎈
- Open-source 🔥
Installation
First, install the package.
npm install @tolgee/react --save
Then use the library in your app:
import { TolgeeProvider } from "@tolgee/react";
import { UI } from "@tolgee/ui";
...
<TolgeeProvider
apiUrl={process.env.REACT_APP_TOLGEE_API_URL}
apiKey={process.env.REACT_APP_TOLGEE_API_KEY}
ui={process.env.REACT_APP_TOLGEE_API_KEY === "true" && UI}
>
<Your app components>
</TolgeeProvider>
Usage
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 API key from Tolgee Cloud or self-hosted Tolgee instance.
Quick integration guide
Learn more at our documentation website 📖.