最简洁的国际化i18n库,用react hooks实现

2,788 阅读2分钟

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
  1. 在应用上层加 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'),
);
  1. 创建 i18n.js 文件:
const i18n = {
  en: {
    welcome: 'hello',
  },
  'zh-CN': {
    welcome: '你好',
  },
};

export default i18n;
  1. 在组件中使用:
import React from 'react';
import { useI18n } from 'use-i18n';

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

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

export default App;
  1. 改变语言:
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;
  1. 完成了,打开 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…