react-multi-lang

React Multi-language component.

Works with React and React Native

Installation

npm i -S react-multi-lang

Usage

Hook

See the example folder for better understanding

import React from 'react'

// Translation Hook
import { setTranslations, setDefaultLanguage, useTranslation } from 'react-multi-lang'
import pt from 'pt.json'
import en from 'en.json'

// Do this two lines only when setting up the application
setTranslations({pt, en})
setDefaultLanguage('en')

const App: React.FC = () => {
  const t = useTranslation()
  return (
    <div>
      {t('home.Title')}
      {t('Hello', {name: 'João'})}
    </div>
  )
}

export default App

Higher order component

import React from 'react'

// Translation Higher Order Component
import { setTranslations, setDefaultLanguage, withTranslation } from 'react-multi-lang'
import pt from 'pt.json'
import en from 'en.json'
import type { T } from 'react-multi-lang'

// Do this two lines only when setting up the application
setTranslations({pt, en})
setDefaultLanguage('en')

type Props = {
  t: T
}

class SomeComponent extends React.Component<Props> {
  render () {
    const { t } = this.props
    return (
      <div>
        {t('home.Title')}
        {t('Hello', {name: 'João'})}
      </div>
    )
  }
}

export default withTranslation(SomeComponent)

Auto update functions

useTranslation(basePath)

React hook that returns the t function

Params | Type | Description | Required ---- | ---- | ---- | ---- basePath | string | translation base path used to identify all the next requested translations | no

withTranslation(component, basePath)

HOC that injects the translation function into the component

Params | Type | Description | Required ---- | ---- | ---- | ---- component | React Component | React component that requires the translation function | yes basePath | string | translation base path used to identify all the next requested translations | no

Translation Method

t(path, params)

Returns the translation for the requested path

Params | Type | Description | Required ---- | ---- | ---- | ---- path | string | translation path that identifies the text | yes params | object | {'param': 'value', ...} each parameter will be set on the string in its correct location | no

Exported Methods

setDefaultTranslations(translations)

Sets the translations

Params | Type | Description | Required ---- | ---- | ---- | ---- translations | object | {'key': 'translations', ...} | yes

setTranslations(translations)

Same as setDefaultTranslations, but this will update all components using translations

Params | Type | Description | Required ---- | ---- | ---- | ---- translations | object | {'key': 'translations', ...} | yes

setDefaultLanguage(key)

Sets the default application language

Params | Type | Description | Required ---- | ---- | ---- | ---- key | string | translation key, in this example 'en' or 'pt' | yes

setLanguage(key)

Same as setDefaultLanguage, but this will update all components using translations

Params | Type | Description | Required ---- | ---- | ---- | ---- key | string | translation key, in this example 'en' or 'pt' | yes

getLanguage()

Returns the current selected language

t(key, params)

t(path, params)

Returns the translation for the requested path

Params | Type | Description | Required ---- | ---- | ---- | ---- path | string | translation path that identifies the text | yes params | object | {'param': 'value', ...} each parameter will be set on the string in its correct location | no