https://github.com/webbestmaster/react-localization-library
React localization hooks and components
https://github.com/webbestmaster/react-localization-library
Last synced: 3 months ago
JSON representation
React localization hooks and components
- Host: GitHub
- URL: https://github.com/webbestmaster/react-localization-library
- Owner: webbestmaster
- License: mit
- Created: 2021-08-04T16:58:32.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2024-09-24T22:08:09.000Z (10 months ago)
- Last Synced: 2025-03-25T21:11:49.818Z (4 months ago)
- Language: TypeScript
- Homepage:
- Size: 317 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# React Localization Library
[](https://github.com/webbestmaster/react-localization-library/blob/master/license)
[](https://codecov.io/gh/webbestmaster/react-localization-library)
[](https://www.npmjs.com/package/react-localization-library)
[](https://snyk.io/test/github/webbestmaster/react-localization-library)
[](https://libraries.io/npm/react-localization-library)
[](https://bundlephobia.com/package/react-localization-library)
[](https://nodejs.org/en/docs)
[](https://github.com/webbestmaster/react-localization-library/actions/workflows/github-ci.yml)
[](https://github.com/webbestmaster/react-localization-library/actions/workflows/github-ci.yml)
[](https://www.typescriptlang.org)
[](https://github.com/webbestmaster/react-localization-library)
[](https://www.codefactor.io/repository/github/webbestmaster/react-localization-library)
[](https://packagequality.com/#?package=react-localization-library)
[](https://github.com/webbestmaster/react-localization-library)React localization hooks and components.
## Install
```bash
npm i react-localization-library
```## Usage
```typescript jsx
import {createLocalization, type LocalizationConfigType, type LocalizationStateType} from 'react-localization-library';const enUs = {
DIFFERENT_VARIABLES: 'Hello, {one}!',
FRIEND: 'friend',
HELLO: 'Hello',
HELLO_SMTH: 'Hello, {smth}!',
// KEY_ONLY_EU_US: 'Hello, en-US!', // throw error when using
};/*
const ruRu = {
DIFFERENT_VARIABLES: 'Hello, {two}!',
FRIEND: 'друг',
HELLO: 'Привет',
HELLO_SMTH: 'Привет, {smth}!',
KEY_ONLY_RU_RU: 'Hello, ru-RU!', // throw error when using
};
*/type LocaleNameType = 'en-US' | 'ru-RU';
type LocaleKeysType = keyof typeof enUs; // & keyof typeof ruRu;const localizationConfig: LocalizationConfigType = {
defaultLocaleName: 'en-US',
localization: {
'en-US': enUs,
'ru-RU': async () => {
const {ruRu} = await import('./ru-ru');return ruRu;
},
},
onUseEffect: (data: LocalizationStateType) => {
const {localeName: newLocaleName} = data;console.log('new locale name', newLocaleName);
},
};const {
LocalizationProvider, // provider, required as wrapper
useLocale, // hook
Locale, // helpful component
} = createLocalization(localizationConfig);function ExampleComponent(): JSX.Element {
const {
localeName, // LocaleNameType, in this case: 'en-US' | 'ru-RU'
isFetchingLocaleData, // boolean
getLocalizedString, // (stringKey: LocaleKeysType, valueMap?: Record) => string;
setLocaleName, // (localeName: LocaleNameType) => void
} = useLocale();return (
<>
Current locale: {localeName}
Localization data is fetching: {isFetchingLocaleData ? 'Yes' : 'No'}
setLocaleName('en-US')} type="button">
use en-US
setLocaleName('ru-RU')} type="button">
use ru-RU
Example 1
{getLocalizedString('FRIEND')}
{getLocalizedString('HELLO_SMTH', {smth: 'type string'})}
{getLocalizedString('DIFFERENT_VARIABLES', {one: 'word 1', two: 'word 2'})}
Example 2
}} />
>
);
}export function ExampleApp(): JSX.Element {
return (
);
}
```## License
See [license](license).