react-multi-lang

Installation

Usage

Hook

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)

withTranslation(component, basePath)

Translation Method

Exported Methods

setDefaultTranslations(translations)

setTranslations(translations)

setDefaultLanguage(key)

setLanguage(key)

getLanguage()

t(key, params)