Sudoo-Internationalization-React

React function for Internationalization

Install

yarn add @sudoo/internationalization-react
yarn add @sudoo/internationalization # Peer Dependencies
# Or
npm install @sudoo/internationalization-react --save
npm install @sudoo/internationalization --save # Peer Dependencies

Usage

Provider API

import * as React from "react";
import { InternationalizationProvider } from "@sudoo/internationalization-react";

React.hydrate(
    (<InternationalizationProvider>
        <YourUseLocaleComponent />
        <YourSetLocaleComponent />
    </InternationalizationProvider>), 
    document.getElementById("container"),
);

Hooks API

import * as React from "react";
import { SudooFormat, LOCALE } from "@sudoo/internationalization";
import { SetLocaleFunction, useFormat, useSetLocale } from "@sudoo/internationalization-react";

export const YourUseLocaleComponent: React.FC = (_props: any) => {

    const format: SudooFormat = useFormat();
    const setLocale: SetLocaleFunction = useSetLocale();

    return (<button onClick={() => {
        setLocale(LOCALE.ENGLISH_UNITED_STATES);
    }}>
        {format.get('set-to-english')}
    </button>);
};

export const YourSetLocaleComponent: React.FC = (_props: any) => {

    const format: SudooFormat = useFormat();

    return (<div>
        {format.get('hello-world')}
    </div>);
};

This site is open source. Improve this page.