@4react/localize 中文文档教程

发布于 5年前 浏览 23 更新于 3年前

@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()

ParameterTypeDefaultDescription
languagesstring[]['en'][optional] Set of supported languages. The first element is considered as fallback.
namespacesstring[]['translations'][optional] Set of supported namespaces.

<Localization>

PropsTypeDefaultDescription
defaultNSstring'translations'[optional] Specify the default namespace.

<Localized>

PropsTypeDefaultDescription
labelstring-Label to localize.
nsstring-[optional] Namespace to witch the label belongs. In case of no namespace specified, the defaultNS of the Localization component is used.
fillersobject-[optional] Maps of elements to fills placeholders in label. Fillers could be of type string, number or components.
langstring-[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()

ParameterTypeDefaultDescription
languagesstring[]['en'][optional] Set of supported languages. The first element is considered as fallback.
namespacesstring[]['translations'][optional] Set of supported namespaces.

<Localization>

PropsTypeDefaultDescription
defaultNSstring'translations'[optional] Specify the default namespace.

<Localized>

PropsTypeDefaultDescription
labelstring-Label to localize.
nsstring-[optional] Namespace to witch the label belongs. In case of no namespace specified, the defaultNS of the Localization component is used.
fillersobject-[optional] Maps of elements to fills placeholders in label. Fillers could be of type string, number or components.
langstring-[optional] Language to override the current selected one.
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文