Tolgee for React provides a simple API to create a 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
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 package.
npm i @tolgee/react
Then wrap your code with TolgeeProvider
import { Tolgee, DevTools, TolgeeProvider, FormatSimple } from "@tolgee/react";
const tolgee = Tolgee()
.use(DevTools())
.use(FormatSimple())
.init({
language: 'en',
apiUrl: process.env.REACT_APP_TOLGEE_API_URL,
apiKey: process.env.REACT_APP_TOLGEE_API_KEY,
});
...
<TolgeeProvider
tolgee={tolgee}
fallback="Loading..." // loading fallback
>
<App />
</TolgeeProvider>
3. Use T component to translate your texts
import { T } from "@tolgee/react";
export const Component = () => {
return (
<h1>
<T keyName="translate_me">Translate me!</T>
</h1>
)
}
Now you are able to Alt + Click & translate your texts!
