2.0.0 • Published 7 months ago
react-simple-i18n v2.0.0
React Simple I18n
- React i18n solution with context API, support React 16.3.0+ (16.8.0+ if use hooks)
- Written in TypeScript
- Lightweight, simple usage, easy to configure
- Lib size: 13.02KB
- Minified: 6.48KB (with compression-webpack-plugin)
- Gzipped: 2.13KB
- 100% test coverage, reliable
Usage
Define languages data first
const langData = {
enUS: {
projects: 'Projects',
cars: 'This car is %s%, that car is %s%',
nav: {
home: 'Home',
},
},
zhCN: {
projects: '项目',
cars: '这辆车是%s%,那辆车是%s%',
nav: {
home: '首页',
},
},
}
Use React hook
import React, { Component } from 'react'
import { createI18n, I18nProvider, useI18n } from 'react-simple-i18n'
const Demo = () => {
const { t, i18n } = useI18n()
return (
<div>
<p>{t('projects')}</p>
<p>{t('cars', 'BMW', 'TOYOTA')}</p>
<p>{t('nav.home')}</p>
<button onClick={() => i18n.setLang('enUS')}>English</button>
<button onClick={() => i18n.setLang('zhCN')}>中文</button>
</div>
)
}
const App = () => (
<I18nProvider i18n={createI18n(langData, { lang: 'enUS' })}>
<Demo />
</I18nProvider>
)
Top Level API
createI18n(data, options)
Creates an i18n
object for I18nProvider
Arguments
data
Language data object, see usage aboveoptions
lang
Initial language to usedefaultText
Function that returns default text if i18n doesn't exist. It takes a single argument which is the i18n key string.
Return
i18n
t(key, ...args)
Get translation by language name- @param
key
{string} key of a translation field - @param
args
{string} strings to replace%s%
in the field
- @param
getLang()
Get current language- @return {string} current language name, such as
enUS
- @return {string} current language name, such as
setLang(lang)
Set language by language name- @param
lang
{string} language name, such asenUS
- @param
addLangData(langData)
Async add language data, allow adding multiple languages once- @param
langData
{object} Language object{ enUS: { key: 'value' } }
- @param
listen(handler)
Add listener to language change- @param
handler
{func()} function which will be called when language change
- @param
unlisten(handler)
Unbind a listener of language change- @param
handler
{func()} function which will be called when language change
- @param
\<I18nProvider i18n>
Makes i18n
available to withI18n
HOC and useI18n
hook
Props
i18n
I18n object created bycreateI18n
useI18n()
A React hook that returns an object with t
and i18n
.
License
MIT
2.0.0
7 months ago
1.4.0
3 years ago
1.4.0-beta.0
3 years ago
1.3.0-beta.1
3 years ago
1.3.0
3 years ago
1.3.0-beta.0
3 years ago
1.2.1
3 years ago
1.2.1-beta.0
5 years ago
1.2.0
6 years ago
1.1.2
6 years ago
1.1.1
6 years ago
1.1.0
7 years ago
1.1.0-beta.1
7 years ago
1.0.0
7 years ago
0.1.1
7 years ago
0.1.0
7 years ago
0.0.1-security
7 years ago