最簡潔的國際化i18n庫，用react hooks實現

use-i18n

地址：github.com/Victorkangs…

最簡單的用 react hooks 實現國際化的 hooks。無任何其餘依賴。

怎樣使用？

1. 安裝：

yarn add use-i18n
//or npm i -S use-i18n
//or cnpm i -S use-i18n
複製代碼

2. 在應用上層加 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'),
);
複製代碼

3. 建立 i18n.js 文件：

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

export default i18n;
複製代碼

4. 在組件中使用：

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

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

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

export default App;
複製代碼

5. 改變語言：

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;
複製代碼

6. 完成了，打開 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]; }; 複製代碼

其中useLocalStorage複製了react-use中的代碼，爲了移除依賴。

下一步是用緩存提高性能。

歡迎你們使用和star

地址：github.com/Victorkangs…