最简洁的国际化i18n库，用react hooks实现-CSDN博客

use-i18n

最简单的用 react hooks 实现国际化的 hooks。无任何其他依赖。

怎样使用？

安装：

yarn add use-i18n
//or npm i -S use-i18n
//or cnpm i -S use-i18n
复制代码

在应用上层加 Provider：

import React from 'react';
import ReactDOM from 'react-dom';
import { TransProvider } from 'use-i18n';
import App from './app';
import i18n from './i18n';

ReactDOM.render(
  <TransProvider i18n={i18n}>
    <App />
  </TransProvider>,
  document.getElementById('root'),
);
复制代码

创建 i18n.js 文件：

const i18n = {
  en: {
    welcome: 'hello',
  },
  'zh-CN': {
    welcome: '你好',
  },
};

export default i18n;
复制代码

在组件中使用：

import React from 'react';
import { useI18n } from 'use-i18n';

const App = () => {
  const t = useI18n();

  return <div>{t.welcome}</div>;
};

export default App;
复制代码

改变语言：

import React from 'react';
import { useI18n, setLang } from 'use-i18n';

const App = () => {
  const t = useI18n();
  const [lang, setNewLang] = setLang();
  const change = () => {
    setNewLang('en');
  };
  return (
    <div>
      <div>{t.welcome}</div>
      <div>{lang}</div>
      <div onClick={change}>change</div>
    </div>
  );
};

export default App;
复制代码

完成了，打开 localstorage 查看如何运作

原理：

检查浏览器语言
检查 localstorage 里有没有缓存
如果没有缓存则把语言文件缓存到 localstorage
- 如果没有检测到浏览器语言，则默认为简体中文
- 在 localstorage 中设置语言和语言文件
添加本地化到 context 中

具体实现如下：

import React, { createContext, useEffect, useContext } from 'react';
import { useLocalStorage } from './useLocalStorage';

const Context = createContext();

export const TransProvider = ({ i18n, children }) => {
  if (!i18n) {
    throw new Error('No i18n provide.');
  }
  const [lang, setLang] = useLocalStorage('lang', undefined);
  const [locales, setLocales] = useLocalStorage('locales', undefined);

  useEffect(() => {
    // load lang
    let currentLang = lang;
    if (!lang) {
      const { navigator } = window;
      if (navigator) {
        const { language, userLanguage, languages } = navigator;
        currentLang =
          language || userLanguage || (languages && languages.length && languages[0]) || 'zh-CN';
      }
      setLang(currentLang);
      return;
    }

    // load locales
    if (
      !locales ||
      !locales.date ||
      !locales.lang ||
      locales.lang !== currentLang ||
      Date.now() - locales.date > 86400000
    ) {
      setLocales({ data: i18n[currentLang], lang: currentLang, date: Date.now() });
    }
  });

  const getMessages = () => locales.data;

  const setNewLang = newLang => {
    setLang(newLang);
    setLocales({ data: i18n[newLang], lang: newLang, date: Date.now() });
  };

  if (!locales) return <div>loading…</div>;

  return (
    <Context.Provider
      value={{
        lang,
        locales,
        getMessages,
        setNewLang,
      }}
    >
      {children}
    </Context.Provider>
  );
};

export const useI18n = path => {
  const { getMessages } = useContext(Context);

  return getMessages(path);
};

export const setLang = () => {
  const { lang, setNewLang } = useContext(Context);

  return [lang, setNewLang];
};
复制代码