react-multi-lang

React Multi-language component.

Works with React and React Native

Installation

npm i -S react-multi-lang

Usage

$3

See the example folder for better understanding

``tsx
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 (


export default App
`

$3

`tsx
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 {
render () {
const { t } = this.props
return (


export default withTranslation(SomeComponent)
``

Auto update functions

$3

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

$3

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

$3

Sets the translations

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

$3

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

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

$3

Sets the default application language

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

$3

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

$3

Returns the current selected language

$3

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