@tolgee/react

React implementation for tolgee localization framework

Usage no npm install needed!

<script type="module">
  import tolgeeReact from 'https://cdn.skypack.dev/@tolgee/react';
</script>

README

test workflow @tolgee/react version types typescript licence twitter github stars

Tolgee for React

React integration library of Tolgee. For more information about using Tolgee with React, visit our documentation website 📖.

Tolgee

Lokalize (translate) your CRA, Gatsby, Next.js or other React projects to multiple languages with Tolgee. Integration of Tolgee is extremely simple! 🇯🇵 🇰🇷 🇩🇪 🇨🇳 🇺🇸 🇫🇷 🇪🇸 🇮🇹 🇷🇺 🇬🇧

Features

  • All in One localization solution for your JS application 🙌
  • Out of box in-context localization 🎉
  • Automated screenshot generation 📷
  • Translation management platform 🎈
  • Open-source 🔥

Installation

First, install the package.

npm install @tolgee/react --save

Then use the library in your app:

import { TolgeeProvider } from "@tolgee/react";
import { UI } from "@tolgee/ui";

...

<TolgeeProvider
  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>

Usage

react-infinite

To translate texts using Tolgee React integration, you can use T component or useTranslate hook.

T component

import { T } from "@tolgee/react";

...

<T>translation_key</T>

or

<T keyName="translation_key">Default value</T>

useTranslate hook

import { useTranslate } from "@tolgee/react";

...

const t = useTranslate();

...

t("key_to_translate")

Prerequisites

  1. You have some React based project
  2. You have generated API key from Tolgee Cloud or self-hosted Tolgee instance.

Quick integration guide

react-integrate-infinite

Learn more at our documentation website 📖.