i18n-pro / react Goto Github PK

View Code? Open in Web Editor NEW

Lightweight, simple, flexible, automatic translation internationalization tool for React（适用于 React 的轻量、简单、灵活、自动翻译的国际化工具）

License: MIT License

JavaScript 20.54% Shell 0.89% TypeScript 78.58%

react's Introduction

Lightweight, simple, flexible, automatic translation internationalization tool for React

English | 简体中文

Table of Contents

Vision
Requirement
Features
Live Demo
Principle
License

Vision

To make internationalization easy and enjoyable 😄💪🏻

Requirement

react >= 16.8.0
react-dom >= 16.8.0
react-native >= 0.59.0
i18n-pro >= 2.0.0

Features

lightweight： +
The following features are inherited from i18n-pro
- simple
- flexible
- automatic-translation
- keyless

Live Demo

Open in CodeSandbox

Principle

This library is implemented based on i18n-pro combined with React 's context feature

Mainly composed of 2 parts

I18nProvider
useI18n

I18nProvider：Configure container components for internationalization initialization properties

useI18n：Hook method for obtaining internationalization API and state

A simple example is as follows

import React from 'react'
import { render } from 'react-dom'
import { I18nProvider, useI18n } from '@i18n-pro/react'

function App() {
  const { t } = useI18n()

  return <>{t('hello world')}</>
}

render(
  <I18nProvider
    namespace="i18n-example"
    locale="en"
    langs={{
      zh: {
        'hello world': '你好世界',
      },
      ja:{
        "hello world": "こんにちは世界",
      },
    }}
  >
    <App />
  </I18nProvider>,
  document.getElementById('root'),
)

Help Document

To avoid unnecessary duplicate document content, some of the documents in this library are linked to the content in i18n-pro
The i18n-pro related link in the current document is based on the 2.0.0 version. If you are using a different version, you need to check the document corresponding to the version you are using to avoid inconsistent usage