Installation

To get full image of working React integration check our React example application. To install Tolgee React integration library run:

npm install @tolgee/react --save

To install UI bundle for in-context translating you will also need to install package @tolgee/ui.

npm install @tolgee/ui --save

First, you will need to wrap your application with TolgeeProvider component.

import {TolgeeProvider} from "@tolgee/react";
import {UI} from "@tolgee/ui";
...
<TolgeeProvider
filesUrlPrefix="i18n/"
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>

If you bootstrapped your application with Create React App, your .env file should look like this:

REACT_APP_TOLGEE_API_URL=https://app.tolgee.io
REACT_APP_TOLGEE_API_KEY=bkcq7tkoinjg9ehk9hc4t3duq3
REACT_APP_TOLGEE_WITH_UI=true

Otherwise, you can set the properties directly or you can use plugins like dotenv-webpack plugin.