@react-translate/core NPM

React Translate

The core library for React Translate.

Shields.io badge

The latest distribution files can be found on UNPKG:

Installation

npm i --save @react-translate/core

Usage

At the root of your app, set up your localization context provider:

import React, { useState } from 'react';
import { Languages, Locales, LocalizationContext } from '@react-translate/core';

const App = () => {
    const [currentLanguage, setCurrentLanguage] = useState<Languages>(Languages.en);
    const [currentLocale, setCurrentLocale] = useState<Locales>(Locales.enUS);

    return (
        <LocalizationContext.Provider value={{
            language: currentLanguage,
            locale: currentLocale,
            update: (language: Languages, locale?: Locales) => {
                setCurrentLanguage(language);
                setCurrentLocale(locale);
            }
        }}>
            ...
        </LocalizationContext.Provider>
    )
}

You can then use the Translate component which will update it's translation whenever LocalizationContext's language property is updated.

import React, { useContext } from 'react';
import Translate from '@react-translate/core';

const MyComponent = () => {
    return (
        <div>
            <Translate en="Hello" es="Hola" de="Guten Tag" fr="Bonjour" it="Salve" ru="Zdravstvuyte" />
        </div>
    )
}