Internationalize Elegant intl library based for Reactjs
- Use intl for packaging
- Support Hooks
- Support Nextjs 14+
yarn add @acrool/react-localecreate src/config/locale.ts
import {TLocaleDictionaries} from '@acrool/react-locale';
export enum ELocales {
enUS = 'en-US',
zhTW = 'zh-TW',
jaJP = 'ja-JP',
}
export const localeDictionaries: TLocaleDictionaries = {
[ELocales.enUS]: require('locales/en-US').default,
[ELocales.zhTW]: require('locales/zh-TW').default,
[ELocales.jaJP]: require('locales/ja-JP').default,
};create src/locales/en-US.ts
export default {
'page.home.title': 'Home',
'page.home.desc': `This is a carousel developed directly using React + Flexbox (non-js secondary development package into React),<br/>
and only include the features you need, not too many cool effects that might complicate your usage or create other weird issues.`,
'page.home.feature.title': 'Feature',
};create src/locales/zh-TW.ts
export default {
'page.home.title': '關於',
'page.home.desc': `Bear Carousel 是一個直接使用React + Flexbox開發的輪播套件 (非js二次開發包成React)，<br/>
並且只包含你需要的功能，沒有太多很酷的效果，因為那些可能會讓你變得不容易使用並且產生其他奇怪的問題`,
'page.home.feature.title': '特性',
};in your src/app.tsx add (is not global state)
import {BlockWrapper} from '@acrool/react-block';
import LocaleProvider from '@acrool/react-locale';
import dayjs from 'dayjs';
import React from 'react';
import styled from 'styled-components';
import {DEFAULT_LOCALE, serverDictionaries} from '@/config/locale';
import {persistKey} from '@/config/app';
interface IProps {
children: JSX.Element
}
/**
* 多語系提供者
* @param children
*/
const ReactLocaleProvider = ({
children
}: IProps) => {
const handleChangeLocale = (newLocale: string) => {
dayjs.locale(newLocale);
};
return <LocaleProvider
localeDictionaries={serverDictionaries}
defaultLocale={DEFAULT_LOCALE}
onChangeLocale={handleChangeLocale}
renderLoading={() => <Loader/>}
persistKey={`${persistKey}-locale`}
>
{children}
</LocaleProvider>;
};
export default ReactLocaleProvider;then in your src/app.tsx
const App = () => {
return (
<Provider store={setup.store}>
<ReactLocaleProvider>
<AppRoute/>
</ReactLocaleProvider>
</Provider>
);
};function component hook
import {useLocale} from '@acrool/react-locale';
const Example = () => {
const {i18n} = useLocale();
return <div>{i18n('page.promotion.title', {defaultMessage: 'promotions', params: {country: 'Taiwan'}})}</div>
}global function (in not function component) only in provider children component
import {translateI18n} from '@acrool/react-locale';
translateI18n('page.promotion.title', {defaultMessage: 'promotions', params: {country: 'taiwan'}})if you use redux(global state) link locale, your can create custom Provider in your project
import React, {Children} from 'react';
import {OriginLocaleProvider} from '@acrool/react-locale';
import {useDispatch, useSelector} from 'react-redux';
import {localeDictionaries, DEFAULT_LOCALE, ELocales} from 'config/locale';
// Stores
import {selector, actions} from 'store/main/language';
interface IProps {
children: JSX.Element
}
const ReactLocaleProvider = ({
children
}: IProps) => {
const dispatch = useDispatch();
const locale = useSelector(selector.selectLanguage);
const handleChangeLocale = (locale: ELocales) => {
dispatch(actions.setLocale({locale}));
};
return <OriginLocaleProvider
localeDictionaries={localeDictionaries}
defaultLocale={DEFAULT_LOCALE}
locale={locale}
setLocale={(locale: string ) => handleChangeLocale(locale as ELocales)}
>
{Children.only(children)}
</OriginLocaleProvider>;
};
export default ReactLocaleProvider;There is also a example that you can play with it:
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent