{% import "../../readmeMacros/macros.njk.md" as macros %} {{ macros.header('Lokale for React', 'The Lokale i18n SDK for React', packageName) }}

What is Lokale for React?

React integration library of Lokale. This package makes it super simple to add i18n to your React app! For more information about using Lokale with React, visit the docs 📖.

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

{{ macros.integrationLinks('Lokale for React docs', macros.v5link('integrations/react/installation')) }}

{{ macros.installation('react') }}

Then use the library in your app:

import { LokaleProvider, ReactPlugin, FormatSimple } from "@lokale/react";

const lokale = Lokale()
  .use(ReactPlugin())
  .use(FormatSimple())
  .init({
    language: 'en',
    apiUrl: process.env.REACT_APP_LOKALE_API_URL,
    apiKey: process.env.REACT_APP_LOKALE_API_KEY
  });


<LokaleProvider
  lokale={lokale}
>
  <Your app components>
</LokaleProvider>

Usage

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

T component

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

...

<T>translation_key</T>

or

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

useTranslate hook

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

...

const { t } = useTranslate();

...

t("key_to_translate")

{{ macros.prereq('React') }}

{{ macros.why() }}

Development

{{ macros.developmentInstallation() }} {{ macros.development('react') }}

{{ macros.developmentTesting('/packages/react') }}

{{ macros.e2eTesting('react') }}

{{ macros.contributors() }}