Skip to main content

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 : undefined}    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.ioREACT_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.