An out-of-the-box, lightweight i18n auto-translation solution for React

English | 简体中文

Table of Contents

Vision
Requirement
Features
Live Demo
Principle
License

Vision

Make internationalization easy and enjoyable 😄💪🏻

Requirement

• react >= 16.8.0
• react-dom >= 16.8.0
• react-native >= 0.59.0
• i18n-pro >= 3.0.0 < 4.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 (
    <>
      {/** text-as-key */}
      <div>{t('hello world')}</div>
      {/** custom-key */}
      <div>{t.t('custom-key', 'hello world')}</div>
    </>
  )
}

render(
  <I18nProvider
    namespace="i18n-example"
    locale="en"
    langs={{
      zh: {
        'hello world': '你好世界',
        'custom-key': '你好世界',
      },
      ja:{
        "hello world": "こんにちは世界",
        'custom-key': 'こんにちは世界',
      },
    }}
  >
    <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 3.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

• Current Library
  • Quick Start
  • API
  • Changelog
• i18n-pro
  • Command Line
  • Matching Rules
  • Q&A
  • Translation log

License

MIT

Copyright (c) 2023-present Eyelly Wu