# min-react-i18n

**Repository Path**: liangbairong/min-react-i18n

## Basic Information

- **Project Name**: min-react-i18n
- **Description**: 最小的国际化库
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-08-29
- **Last Updated**: 2022-11-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: i18n

## README

# min-react-i18n

最小的react国际化库，大小不到1kb，国际化内容会过滤敏感内容，防止js代码注入攻击

### 使用方法

初始化
```javascript
import reactI18n from "min-react-i18n";

const lang='zh-cn'

useEffect(() => {
    setInitDone(false);
    const url = '/i18n/' + lang + '/index.json'
    fetch(url)
        .then(response => response.json())
        .then(json => {
            // json {
            //     "Totheformerone": "你的名字是 {value}",
            // }
            reactI18n.init(json)
        });

}, [currentLocale]);

```


Text组件
```javascript
import React, {FC, useEffect, useState} from 'react';
import reactI18n from "min-react-i18n";

/**
 * i18nKey: 必须，国际化key
 * options：非必须，国际化参数
 */
const Text= ({
                                  i18nKey,
                                  options = {},
                                  children=''
                              }) => {
    const [html, setHtml] = useState<any>('')
    useEffect(() => {
        setHtml(reactI18n.get(i18nKey,options) || children)
    }, [i18nKey])
    return <span dangerouslySetInnerHTML={{__html: html}}/>

}

export default Text

```

使用
```javascript
<Text i18nKey='Totheformerone' options={{value:'小明'}}>内容</Text>  // 你的名字是 小明
```