Installation (React)

info

To get full image of working React integration check our React example application.

To install Tolgee React integration library run:

npm

npm install @tolgee/react

yarn

yarn add @tolgee/react

pnpm

pnpm install @tolgee/react

Init Tolgee and wrap your application in TolgeeProvider.

import { Tolgee, DevTools, TolgeeProvider, FormatSimple } from "@tolgee/react";

const tolgee = Tolgee()
  .use(DevTools())
  .use(FormatSimple())
  .init({
    language: 'en',

    // for development
    apiUrl: process.env.REACT_APP_TOLGEE_API_URL,
    apiKey: process.env.REACT_APP_TOLGEE_API_KEY,

    // for production
    staticData: {
      ...
    }
  });

...

<TolgeeProvider
  tolgee={tolgee}
  fallback="Loading..." // loading fallback
>
  <your-app-components>
</TolgeeProvider>

Check Initialization for more info.

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=tgpak_gfpwiojtnrztqmtbna3dczjxny2ha3dmnu4tk4tnnjvgc

danger

Never leak your API key! You don't want visitors of your site to edit your translations. That's why we recommend to use .env files to store your API key. API key is then omitted for production build.

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

Obtaining Tolgee API key is described in Integration chapter.

Preparing for production

In production mode, you should never use localization data from Tolgee REST API and never leak your API key. You should use data exported from the Tolgee platform. To get exported localization files, see exporting translations.

Then provide the data via Tolgee configuration options described in Providing static data.