{"id":20447613,"url":"https://github.com/acrool/acrool-react-locale","last_synced_at":"2025-04-13T01:10:34.262Z","repository":{"id":44335529,"uuid":"458674069","full_name":"acrool/acrool-react-locale","owner":"acrool","description":"Internationalize Elegant intl library based  for Reactjs","archived":false,"fork":false,"pushed_at":"2025-03-14T07:27:10.000Z","size":1843,"stargazers_count":10,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-26T19:02:56.140Z","etag":null,"topics":["i18n","intl","locale","reactjs"],"latest_commit_sha":null,"homepage":"https://acrool-react-locale.pages.dev/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/acrool.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-02-13T00:39:10.000Z","updated_at":"2025-03-14T07:27:13.000Z","dependencies_parsed_at":"2024-06-24T10:56:28.553Z","dependency_job_id":"c5619262-e3e9-4df2-9de9-12e9bad5fb12","html_url":"https://github.com/acrool/acrool-react-locale","commit_stats":{"total_commits":55,"total_committers":1,"mean_commits":55.0,"dds":0.0,"last_synced_commit":"408563207f18a6cfe449033b86eeb217020a297d"},"previous_names":["acrool/acrool-react-locale","imagine10255/bear-react-locale"],"tags_count":42,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acrool%2Facrool-react-locale","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acrool%2Facrool-react-locale/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acrool%2Facrool-react-locale/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acrool%2Facrool-react-locale/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/acrool","download_url":"https://codeload.github.com/acrool/acrool-react-locale/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248650750,"owners_count":21139681,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["i18n","intl","locale","reactjs"],"created_at":"2024-11-15T10:28:04.791Z","updated_at":"2025-04-13T01:10:34.256Z","avatar_url":"https://github.com/acrool.png","language":"TypeScript","funding_links":[],"categories":["React underlying structure"],"sub_categories":[],"readme":"# Acrool React Locale\n\n\u003ca href=\"https://acrool-react-locale.pages.dev/\" title=\"Acrool React Locale - Internationalize Elegant intl library based for Reactjs\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/acrool/acrool-react-locale/main/example/public/og.webp\" alt=\"Acrool React Locale Logo\"/\u003e\n\u003c/a\u003e\n\n\u003cp align=\"center\"\u003e\n    Internationalize Elegant intl library based for Reactjs\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![NPM](https://img.shields.io/npm/v/@acrool/react-locale.svg?style=for-the-badge)](https://www.npmjs.com/package/@acrool/react-locale)\n[![npm](https://img.shields.io/bundlejs/size/@acrool/react-locale?style=for-the-badge)](https://github.com/acrool/@acrool/react-locale/blob/main/LICENSE)\n[![npm](https://img.shields.io/npm/l/@acrool/react-locale?style=for-the-badge)](https://github.com/acrool/react-locale/blob/main/LICENSE)\n\n[![npm downloads](https://img.shields.io/npm/dm/@acrool/react-locale.svg?style=for-the-badge)](https://www.npmjs.com/package/@acrool/react-locale)\n[![npm](https://img.shields.io/npm/dt/@acrool/react-locale.svg?style=for-the-badge)](https://www.npmjs.com/package/@acrool/react-locale)\n\n\n\u003c/div\u003e\n\n## Features\n\n- Use intl for packaging\n- Support Hooks\n- Support Nextjs 14+\n\n\n## Install\n\n```bash\nyarn add @acrool/react-locale\n```\n\n## Usage\n\ncreate src/config/locale.ts\n\n```tsx\nimport {TLocaleDictionaries} from '@acrool/react-locale';\nimport {enUS} from '@/locales/en-US';\nimport {zhTW} from '@/locales/zh-TW';\nimport {jaJP} from '@/locales/ja-JP';\n\nexport enum ELocales {\n    enUS = 'en-US',\n    zhTW = 'zh-TW',\n    jaJP = 'ja-JP',\n}\n\nexport const localeDictionaries: TLocaleDictionaries = {\n    [ELocales.enUS]: enUS,\n    [ELocales.zhTW]: zhTW,\n    [ELocales.jaJP]: jaJP,\n};\n```\n\ncreate src/locales/en-US.ts\n\n```ts\nexport default {\n    'page.home.title': 'Home',\n    'page.home.desc': `This is a carousel developed directly using React + Flexbox (non-js secondary development package into React),\u003cbr/\u003e\n    and only include the features you need, not too many cool effects that might complicate your usage or create other weird issues.`,\n    'page.home.feature.title': 'Feature',\n};\n```\n\ncreate src/locales/zh-TW.ts\n\n```ts\nexport default {\n    'page.home.title': '關於',\n    'page.home.desc': `Bear Carousel 是一個直接使用React + Flexbox開發的輪播套件 (非js二次開發包成React)，\u003cbr/\u003e\n     並且只包含你需要的功能，沒有太多很酷的效果，因為那些可能會讓你變得不容易使用並且產生其他奇怪的問題`,\n    'page.home.feature.title': '特性',\n};\n```\n\n\ncreate src/library/acrool-react-locale/index.tsx\n\n```tsx\nimport {BlockWrapper} from '@acrool/react-block';\nimport {LocaleProvider} from '@acrool/react-locale';\nimport dayjs from 'dayjs';\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport {DEFAULT_LOCALE, serverDictionaries} from '@/config/locale';\nimport {persistKey} from '@/config/app';\n\ninterface IProps {\n    children: JSX.Element\n}\n\n\n/**\n * Custom Locale Provider\n * @param children\n */\nconst ReactLocaleProvider = ({\n     children\n }: IProps) =\u003e {\n    const handleChangeLocale = (newLocale: string) =\u003e {\n        dayjs.locale(newLocale);\n    };\n\n    return \u003cLocaleProvider\n        localeDictionaries={serverDictionaries}\n        defaultLocale={DEFAULT_LOCALE}\n        onChangeLocale={handleChangeLocale}\n        renderLoading={() =\u003e \u003cLoader/\u003e}\n        persistKey={`${persistKey}-locale`}\n    \u003e\n        {children}\n    \u003c/LocaleProvider\u003e;\n};\n\nexport default ReactLocaleProvider;\n```\n\n\nthen in your src/app.tsx\n\n```tsx\n\nconst App = () =\u003e {\n    return (\n        \u003cProvider store={setup.store}\u003e\n            \u003cReactLocaleProvider\u003e\n                \u003cAppRoute/\u003e\n            \u003c/ReactLocaleProvider\u003e\n        \u003c/Provider\u003e\n    );\n};\n```\n\n\n### If you need async load dictionaries\n\nin src/config/locale.ts\n\n```tsx\nimport {TLocaleDictionariesAsync} from '@acrool/react-locale';\n\nexport enum ELocales {\n    enUS = 'en-US',\n    zhTW = 'zh-TW',\n    jaJP = 'ja-JP',\n}\n\nexport const localeDictionaries: TLocaleDictionariesAsync = {\n    [ELocales.enUS]: () =\u003e import('@/locales/en-US'),\n    [ELocales.zhTW]: () =\u003e import('@/locales/zh-TW'),\n    [ELocales.jaJP]: () =\u003e import('@/locales/ja-JP'),\n};\n```\n\nin src/library/acrool-react-locale/index.tsx\n\n```tsx\nimport {LocaleAsyncProvider} from '@acrool/react-locale';\n// ...ignore same\n\nconst ReactLocaleProvider = ({\n     children\n }: IProps) =\u003e {\n    const handleChangeLocale = (newLocale: string) =\u003e {\n        dayjs.locale(newLocale);\n    };\n\n    return \u003cLocaleAsyncProvider\n        //...ignore same\n    \u003e\n        {children}\n    \u003c/LocaleAsyncProvider\u003e;\n};\n\nexport default ReactLocaleProvider;\n```\n\n\n### How to use\n\nfunction component hook\n\n```tsx\nimport {useLocale} from '@acrool/react-locale';\n\n\nconst Example = () =\u003e {\n    const {t} = useLocale();\n    return \u003cdiv\u003e{t('page.promotion.title', {defaultMessage: 'promotions', params: {country: 'Taiwan'}})}\u003c/div\u003e\n}\n```\n\nglobal function (in not function component) `only in provider children component`\n\n```ts\nimport {translateI18n} from '@acrool/react-locale';\ntranslateI18n('page.promotion.title', {defaultMessage: 'promotions', params: {country: 'taiwan'}})\n```\n\n\n## Option\n\nif you use redux(global state) link locale, your can create custom Provider in your project\n\n```tsx\nimport React, {Children} from 'react';\nimport {OriginLocaleProvider} from '@acrool/react-locale';\nimport {useDispatch, useSelector} from 'react-redux';\nimport {localeDictionaries, DEFAULT_LOCALE, ELocales} from './config/locale';\n\n// Stores\nimport {selector, actions} from './store/main/language';\n\ninterface IProps {\n    children: JSX.Element\n}\n\nconst ReactLocaleProvider = ({\n    children\n}: IProps) =\u003e {\n    const dispatch = useDispatch();\n    const locale = useSelector(selector.selectLanguage);\n\n    const handleChangeLocale = (locale: ELocales) =\u003e {\n        dispatch(actions.setLocale({locale}));\n    };\n\n    return \u003cOriginLocaleProvider\n        localeDictionaries={localeDictionaries}\n        defaultLocale={DEFAULT_LOCALE}\n        locale={locale}\n        setLocale={(locale: string ) =\u003e handleChangeLocale(locale as ELocales)}\n    \u003e\n        {Children.only(children)}\n    \u003c/OriginLocaleProvider\u003e;\n};\n\nexport default ReactLocaleProvider;\n```\n\n## Storybook use (Not async load locale dictionaries)\n\n```tsx\nimport {PartialStoryFn, Renderer} from '@storybook/types';\nimport {DEFAULT_LOCALE, ELocales} from \"@/config/locale\";\nimport {persistKey} from \"@/config/app\";\nimport LocaleProvider, {TLocaleDictionaries} from \"@acrool/react-locale\";\nimport localeEnUS from \"@/locales/en-US\";\n\n\nconst localeDictionaries: TLocaleDictionaries = {\n    [ELocales.enUS]: localeEnUS,\n};\nconst withI18next = (StoryFn: PartialStoryFn\u003cRenderer\u003e) =\u003e {\n\n    return (\n        \u003cLocaleProvider\n            localeDictionaries={localeDictionaries}\n            defaultLocale={DEFAULT_LOCALE}\n            persistKey={`${persistKey}-locale`}\n        \u003e\n            \u003cStoryFn/\u003e\n        \u003c/LocaleProvider\u003e\n    );\n};\n\n\n\n// storybook preview.tsx\nconst preview: Preview = {\n    parameters: {\n        controls: {\n            matchers: {\n                color: /(background|color)$/i,\n                date: /Date$/i,\n            },\n        },\n    },\n    decorators: [\n        withI18next,\n        (Story) =\u003e (\n            \u003cGridThemeProvider\u003e\n                \u003c\u003e\n                    \u003cStory/\u003e\n                    {SvgSymbol}\n                \u003c/\u003e\n            \u003c/GridThemeProvider\u003e\n        ),\n    ],\n};\n```\n\n\nThere is also a example that you can play with it:\n\n[![Play react-editext-example](https://raw.githubusercontent.com/acrool/acrool-react-locale/main/play-in-example-button.svg)](https://acrool-react-locale.pages.dev)\n\n\n## License\n\nMIT © [Acrool](https://github.com/acrool) \u0026 [Imagine](https://github.com/imagine10255)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Facrool%2Facrool-react-locale","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Facrool%2Facrool-react-locale","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Facrool%2Facrool-react-locale/lists"}