Skip to main content
Github discussionsGithub Tolgee JSGithub Tolgee Server

Tolgee for React


Tolgee for React provides simple API to create multi-lingual React application. With Tolgee i18n library for React you can enjoy all Tolgee i18n features.

To see React with Tolgee in action, check this example app.

npm i @tolgee/react

In-context localization 🐁

Tolgee for React is not just an i18n library. It provides much more. With in-context localization feature, you can just Alt + Click translations in your app and translate them directly. No more extracting, no more editing of .jsons or .xliff.

Localization platform ☁️

Tolgee localization platform provides simple user interface where, you can edit all your localization string. So you don't have to worry about choosing other tool for editing your translations. Tolgee and it's SDKs is all you need to localize your app.

Simple integration 🎉

To integrate Tolgee to React project, you can just simply follow these docs, or use integration guides in Tolgee platform. You can do that in less than one minute.

Automated screenshot generation 📸

With in-context localization UI, you can take screenshots of your application and uploaded them to Tolgee platform just by single click.

Open-source 📖

Tolgee platform and integration libraries are open-source. So you can self-host it and be fine!

Get started!

1. Create project in Tolgee platform

Go to Tolgee Cloud app or access your self-hosted instance and create a project. Then obtain your API key.

2. Setup Tolgee integration

Install the npm packages.

npm i @tolgee/react

Then wrap your code with TolgeeProvider

import { TolgeeProvider } from "@tolgee/react";
export const Wrapper = () => {
return (
apiKey="<your api key>"
<App />

3. Use T component to translate your texts

import { T } from "@tolgee/react";

export const Component = () => {
return (
<T keyName="translate_me">Translate me!</T>

Now you are able to Alt + Click & translate your texts!

Explore the Docs and check out example app!

Continue exploring...