@4react/localize 中文文档教程
@4react / localize
React 应用程序的 React-to-use i18n 配置和组件。
NOTE
这个包的目的是为最大数量的项目提供一个简单和标准的解决方案。
它主要基于 react-i18next。 请考虑支持他们的工作。
Usage
Import dependency
npm i @4react/localize
Init i18n
使用 initI18n 初始化 i18n,可选择指定语言 和名称空间。
import { initI18n } from '@4react/localize'
initI18n(
['en', 'it', 'es'], // languages
['common', 'profile'] // namespaces
)
Provide localization
使用 Localization
组件为应用程序提供翻译。
import { Localization } from '@4react/localize'
const App = () => (
<Localization>
// content
</Localization>
)
Translate labels
使用 Localized
组件翻译标签。
import { Localized } from '@4react/localize'
const CustomComponent = () => (
<Localized label="awesome" />
)
…and use any kind of filler (also components)
const CustomComponent = () => (
<Localized
label="my-fillable-label"
fillers={{
name: 'Matteo',
age: 28,
component: <MyCustomFiller />
}}
/>
)
// Hi, I'm {{name}} and I'm {{age}} years old. Look at this {{component}}!
翻译呈现为没有额外样式或结构的简单文本。
Documentation
initI18n()
Parameter | Type | Default | Description |
---|---|---|---|
languages | string[] | ['en'] | [optional] Set of supported languages. The first element is considered as fallback. |
namespaces | string[] | ['translations'] | [optional] Set of supported namespaces. |
<Localization>
Props | Type | Default | Description |
---|---|---|---|
defaultNS | string | 'translations' | [optional] Specify the default namespace. |
<Localized>
Props | Type | Default | Description |
---|---|---|---|
label | string | - | Label to localize. |
ns | string | - | [optional] Namespace to witch the label belongs. In case of no namespace specified, the defaultNS of the Localization component is used. |
fillers | object | - | [optional] Maps of elements to fills placeholders in label. Fillers could be of type string, number or components. |
lang | string | - | [optional] Language to override the current selected one. |
@4react / localize
React-to-use i18n configuration and components for React Applications.
NOTE
The purpose of this package is to provide a simple and standard solution for the largest amount of projects.
It is mainly based on react-i18next. Please consider to support their work.
Usage
Import dependency
npm i @4react/localize
Init i18n
Initialize i18n with initI18n, optionally specifying languages and namespaces.
import { initI18n } from '@4react/localize'
initI18n(
['en', 'it', 'es'], // languages
['common', 'profile'] // namespaces
)
Provide localization
Use the Localization
component to provide translations over the application.
import { Localization } from '@4react/localize'
const App = () => (
<Localization>
// content
</Localization>
)
Translate labels
Use the Localized
component to translate labels.
import { Localized } from '@4react/localize'
const CustomComponent = () => (
<Localized label="awesome" />
)
…and use any kind of filler (also components)
const CustomComponent = () => (
<Localized
label="my-fillable-label"
fillers={{
name: 'Matteo',
age: 28,
component: <MyCustomFiller />
}}
/>
)
// Hi, I'm {{name}} and I'm {{age}} years old. Look at this {{component}}!
Translations are rendered as simple text with no additional style or structure.
Documentation
initI18n()
Parameter | Type | Default | Description |
---|---|---|---|
languages | string[] | ['en'] | [optional] Set of supported languages. The first element is considered as fallback. |
namespaces | string[] | ['translations'] | [optional] Set of supported namespaces. |
<Localization>
Props | Type | Default | Description |
---|---|---|---|
defaultNS | string | 'translations' | [optional] Specify the default namespace. |
<Localized>
Props | Type | Default | Description |
---|---|---|---|
label | string | - | Label to localize. |
ns | string | - | [optional] Namespace to witch the label belongs. In case of no namespace specified, the defaultNS of the Localization component is used. |
fillers | object | - | [optional] Maps of elements to fills placeholders in label. Fillers could be of type string, number or components. |
lang | string | - | [optional] Language to override the current selected one. |