Codestacks React Locale

Internationalize Elegant intl library based for Reactjs

^3.2.1 support react >=18.0.0 <20.0.0

Features

- Use react-intl v7 for packaging
- Support Hooks
- Support Nextjs 15+

Install

``bash
yarn add @codestacks/react-locale
`

Usage

create src/config/locale.ts

`tsx
import {TLocaleDictionaries} from '@codestacks/react-locale';
import {enUS} from '@/locales/en-US';
import {zhTW} from '@/locales/zh-TW';
import {jaJP} from '@/locales/ja-JP';

export enum ELocales {
enUS = 'en-US',
zhTW = 'zh-TW',
jaJP = 'ja-JP',
}

export const localeDictionaries: TLocaleDictionaries = {
[ELocales.enUS]: enUS,
[ELocales.zhTW]: zhTW,
[ELocales.jaJP]: jaJP,
};
`

create src/locales/en-US.ts (Default Locales)

`ts
/*-------------------------
* Default Locales
---------------------------*/
const translations = {
page: {
'page.home.field.title': 'Title',
'page.home.desc': This is a carousel developed directly using React + Flexbox (non-js secondary development package into React),
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',
},
formatError:{
'formatError.email': 'Email format error',
'formatError.max': 'The maximum value is {max}',
'formatError.maxFraction': 'The floating-point number can only have a maximum of {maxFraction} digits',
'formatError.maxLength': 'Up to {maxLength} characters',
'formatError.min': 'The minimum value is {min}',
'formatError.minLength': 'At least {minLength} characters',
'formatError.pattern': 'Format error',
'formatError.required': 'Required Column'
}
};

export default translations;
export type TDefaultTranslations = typeof translations;
`

create src/locales/zh-TW.ts (Options Locales)

`ts
import {TDefaultTranslations} from './en-US'; // Import default locales

const translations: TDefaultTranslations = {
page:{
'page.home.field.title': '標題',
'page.home.desc': Bear Carousel 是一個直接使用React + Flexbox開發的輪播套件 (非js二次開發包成React)，
並且只包含你需要的功能，沒有太多很酷的效果，因為那些可能會讓你變得不容易使用並且產生其他奇怪的問題,
'page.home.feature.title': '特性',
},
formatError: {
'formatError.email': '電子郵件格式錯誤',
'formatError.max': '最大值為 {max}',
'formatError.maxFraction': '浮點數最多僅能為 {maxFraction} 位數',
'formatError.maxLength': '最多 {maxLength} 個字元',
'formatError.min': '最小值為 {min}',
'formatError.minLength': '至少 {minLength} 個字元',
'formatError.pattern': '格式錯誤',
'formatError.required': '必填欄位'
}
} as const;

export default translations;
`

> as const only other language


create src/library/react-locale/index.tsx

`tsx
import {BlockWrapper} from '@codestacks/react-block';
import {LocaleProvider} from '@codestacks/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
}


/**
* Custom Locale Provider
* @param children
*/
const ReactLocaleProvider = ({
children
}: IProps) => {
const handleChangeLocale = (newLocale: string) => {
dayjs.locale(newLocale);
};

return localeDictionaries={serverDictionaries}
defaultLocale={DEFAULT_LOCALE}
onChangeLocale={handleChangeLocale}
renderLoading={() => }
persistKey={${persistKey}-locale}
ignoreMissingLocaleMessage={false}
>
{children}
;
};

export default ReactLocaleProvider;
`


then in your src/app.tsx

`tsx

const App = () => {
return (





);
};
`




$3

in src/config/locale.ts

${languageCode}-${countryCode}

languageCode is a two-letter lowercase code as defined by ISO-639.
https://zh.wikipedia.org/zh-tw/ISO_639-1

countryCode is a two-letter uppercase code as defined by ISO-3166.
https://zh.wikipedia.org/zh-tw/ISO_3166-1

For example, en-US is the language value for United States English.

`tsx
import {TLocaleDictionariesAsync} from '@codestacks/react-locale';

export enum ELocales {
enUS = 'en-US',
zhTW = 'zh-TW',
jaJP = 'ja-JP',
}

export const localeDictionaries: TLocaleDictionariesAsync = {
[ELocales.enUS]: () => import('@/locales/en-US').then((module) => module.default),
[ELocales.zhTW]: () => import('@/locales/zh-TW').then((module) => module.default),
[ELocales.jaJP]: () => import('@/locales/ja-JP').then((module) => module.default),
};
`

in src/library/react-locale/index.tsx

`tsx
import {LocaleAsyncProvider} from '@codestacks/react-locale';
// ...ignore same

const ReactLocaleProvider = ({
children
}: IProps) => {
const handleChangeLocale = (newLocale: string) => {
dayjs.locale(newLocale);
};

return //...ignore same
>
{children}
;
};

export default ReactLocaleProvider;
`




$3

function component hook

`tsx
import {useLocale} from '@codestacks/react-locale';


const Example = () => {
const {t} = useLocale();
return


}
`

global function (in not function component) only in provider children component

`ts
import {translateI18n} from '@codestacks/react-locale';
translateI18n('page.promotion.title', {def: 'promotions', params: {country: 'taiwan'}})
`




Option

if you use redux(global state) link locale, your can create custom Provider in your project

`tsx
import React, {Children} from 'react';
import {OriginLocaleProvider} from '@codestacks/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 localeDictionaries={localeDictionaries}
defaultLocale={DEFAULT_LOCALE}
locale={locale}
setLocale={(locale: string ) => handleChangeLocale(locale as ELocales)}
ignoreMissingLocaleMessage={false}
>
{Children.only(children)}
;
};

export default ReactLocaleProvider;
`

Storybook use (Not async load locale dictionaries)

`tsx
import {PartialStoryFn, Renderer} from '@storybook/types';
import {DEFAULT_LOCALE, ELocales} from "@/config/locale";
import {persistKey} from "@/config/app";
import LocaleProvider, {TLocaleDictionaries} from "@codestacks/react-locale";
import localeEnUS from "@/locales/en-US";


const localeDictionaries: TLocaleDictionaries = {
[ELocales.enUS]: localeEnUS,
};
const withI18next = (StoryFn: PartialStoryFn) => {

return (
localeDictionaries={localeDictionaries}
defaultLocale={DEFAULT_LOCALE}
persistKey={${persistKey}-locale}
ignoreMissingLocaleMessage={false}
>


);
};

// storybook preview.tsx
const preview: Preview = {
parameters: {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
},
decorators: [
withI18next,
(Story) => (



),
],
};
``