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];
};
其中useLocalStorage
复制了react-use
中的代码,为了移除依赖。
下一步是用缓存提升性能。
欢迎大家使用和star