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 && UI}
loadingFallback={<>Loading...</>} //content to show when localization data is loading
>
<Your app components>
</TolgeeProvider>

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

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

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

Other configuration properties#

Configuration properties for all web integrations are similar. They are described in configuration section.