bulhiczar / react-localize-alias

Library for localization of React applications with support for templates and HTML

Installation

yarn add react-localize-alias
or
npm i react-localize-alias

Simple

import {
  initLocalize,
  Translate,
  setActiveLanguage,
  getTranslate,
} from 'react-localize-alias'

const translations = {
  en: {
    hello: 'Hellow bro',
    'auth.title': 'Welcome to <b>site</b>',
    apple_count: 'Apple: ${count}',
  },
  ru: {
    hello: 'Привет, друг',
    'auth.title': 'Добро пожаловать на <b>сайт</b>',
    apple_count: 'Яблок: ${count}',
  },
}

export const App = () => {

  useEffect(() => {
   initLocalize({
         languages: [
           { code: 'en', name: 'English' },
           { code: 'ru', name: 'Russian' },
         ],
         translations,
         options: {
           defaultLanguage: 'en',
           // if the alias for the current language is not found. this function will be called
           onMissing: data => console.log(data),
           // this function will be called whenever the alias is rendered. here you can change the aliases that were set in the components
           onAlias: (alias) => alias,
         },
       })
  }, [])

  console.log(getTranslate('hello'))

  return (
    <>
      <button type="button" onClick={() => setActiveLanguage('en')}>
        set EN
      </button>
      <button type="button" onClick={() => setActiveLanguage('ru')}>
        set RU
      </button>

      <Translate id="hello" />

      <Translate
        id="apple_count"
        data={{ count: 123 }}
      />

      <Translate id="not_found_alias" /> 

    </>
  )
}

Documentation

Init Localize

import { initLocalize } from 'react-localize-alias'

const translations = {
    en: {
        hello: 'hi',
        auth.title: 'welcome to site',
        auth_button: 'next ${numebr}'
        },
    ru: {
        hellow: 'привет',
        auth.title: 'спс за регу',
        auth_button: 'далее ${number}'
    }
}

initLocalize({
    languages: [
        { code: 'en', name: 'English' },
        { code: 'ru', name: 'Руский' },
    ],
    translations,
    options: {
      defaultLanguage: 'en',
      onMissing: data => console.log(data),
    },
})

Using

import { Translate, getTranslate } from 'react-localize-alias'

<Translate id='auth.title' />
getTranslate('auth.title')

// get castom value 
<Translate id='auth_button' data={{ numebr: 5 }}/> // -> next 5
getTranslate('auth_button', { data: { number: 5 } } })

Change language

import { setActiveLanguage } from 'react-localize-alias'

const App = () => {
    const handlerLanguage = () => {
        setActiveLanguage('en')
    }

    return <div onClick={handlerLanguage}>set en</div>  
}