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 (over 3 years ago)
• Default Branch: master
• Last Pushed: 2024-07-06T15:03:58.000Z (7 months ago)
• Last Synced: 2024-08-08T17:29:49.872Z (6 months ago)
• Language: TypeScript
• Homepage:
• Size: 304 KB
• Stars: 2
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: license

Awesome Lists containing this project

README

        
# React Localization Library

[![GitHub license](https://img.shields.io/npm/l/react-localization-library)](https://github.com/webbestmaster/react-localization-library/blob/master/license)

[![codecov](https://codecov.io/gh/webbestmaster/react-localization-library/branch/master/graph/badge.svg)](https://codecov.io/gh/webbestmaster/react-localization-library)

[![npm version](https://img.shields.io/npm/v/react-localization-library.svg)](https://www.npmjs.com/package/react-localization-library)

[![Known Vulnerabilities](https://snyk.io/test/github/webbestmaster/react-localization-library/badge.svg)](https://snyk.io/test/github/webbestmaster/react-localization-library)

[![Dependency count](https://badgen.net/bundlephobia/dependency-count/react-localization-library)](https://libraries.io/npm/react-localization-library)

[![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-localization-library)](https://bundlephobia.com/package/react-localization-library)

[![nodejs version](https://img.shields.io/node/v/react-localization-library)](https://nodejs.org/en/docs)

[![Github CI](https://github.com/webbestmaster/react-localization-library/actions/workflows/github-ci.yml/badge.svg)](https://github.com/webbestmaster/react-localization-library/actions/workflows/github-ci.yml)

[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/webbestmaster/react-localization-library/github-ci.yml)](https://github.com/webbestmaster/react-localization-library/actions/workflows/github-ci.yml)

[![Type definitions](https://img.shields.io/npm/types/react-localization-library)](https://www.typescriptlang.org)

[![Website](https://img.shields.io/website?url=https://github.com/webbestmaster/react-localization-library)](https://github.com/webbestmaster/react-localization-library)

[![CodeFactor](https://www.codefactor.io/repository/github/webbestmaster/react-localization-library/badge)](https://www.codefactor.io/repository/github/webbestmaster/react-localization-library)

[![Package Quality](https://packagequality.com/shield/react-localization-library.svg)](https://packagequality.com/#?package=react-localization-library)

[![GitHub stars](https://img.shields.io/github/stars/webbestmaster/react-localization-library?style=social)](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).