# react-locale-language

> provides localization support for react-projects

Latest version **1.0.8** (published 2022-04-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-locale-language
pnpm add react-locale-language
yarn add react-locale-language
bun add react-locale-language
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2022-04-30 |
| First published | 2020-05-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 14.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Shubham Kesarwani |
| Maintainers | shubhamkes |
| Keywords | react-locale-language, react-locale, react-native-locale, rn-locale, rn-locale-context, rn locale language context |

## Links

- npm: https://www.npmjs.com/package/react-locale-language
- npm.io page: https://npm.io/package/react-locale-language

## Dependencies (1)

- [react-localization](https://npm.io/package/react-localization.md) ^1.0.19

## Alternatives

- [messageformat](https://npm.io/package/messageformat.md) — 329.7K weekly downloads
- [@mintlify/scraping](https://npm.io/package/@mintlify/scraping.md) — 294.8K weekly downloads
- [@mintlify/previewing](https://npm.io/package/@mintlify/previewing.md) — 209.5K weekly downloads
- [@mintlify/prebuild](https://npm.io/package/@mintlify/prebuild.md) — 209.5K weekly downloads
- [@mintlify/link-rot](https://npm.io/package/@mintlify/link-rot.md) — 206.3K weekly downloads

## Recent versions

- 1.0.8 (latest) — 2022-04-30
- 1.0.7 — 2020-11-04
- 1.0.6 — 2020-11-04
- 1.0.3 — 2020-05-28
- 1.0.2 — 2020-05-28
- 1.0.1 — 2020-05-28
- 1.0.0 — 2020-05-27

## README

# React Locale (React, React-Native supported)

Highly customizable small size library for providing support for language localization!
- Supports fetching translated content from the server and update the content later


## Getting Started

```bash
$ yarn add react-locale-language
```

*or via

```bash
$ npm i react-locale-language
```

### Example of usage:

```js
import { LocalizeContextProvider, LocalizeContext } from 'react-locale-language';

const RootApp = () => {
    const languageContent = {
        "en-US": {
            hello: "Hello ${name}, How are you feeling today?",
            welcome: "Welcome aboard",
        }
    };

    return (
        // value && languageCode is optional here, setContent can also be used to update the content later and changeLanguage can be used to update the language setting
        <LocalizeContextProvider value={languageContent} languageCode="en-US" >
            <ThemeContextProvider value={uiTheme}>
                <Landing />
            </ThemeContextProvider>
        </LocalizeContextProvider>
    )
}

const Landing = () =>  {
    const { translate,  changeLanguage, setContent } = useContext(LocalizeContext);

    useEffect(() => {
        // using setTimeout just to mimic the pattern of fetching data for different languages from the server

        // its not necessary to load the translated texts in all the available languages at once

        setTimeout(() => {
            setContent({
                'hi-IN': {
                    hello: "हैलो ${name}, आज आप कैसा महसूस कर रहे हैं?",
                    welcome: "स्वागत है",
                }
            })

            // as soon as content is set, can change the default language
            changeLanguage('hi-IN'); // this will reflect the change across the app
            // incase there is no translation for this language, first added langauge content would become default
        }, 2000);
    })
    return (
        // ${name} will be replaced by the value of object having key 'name' which is passed as second argument in translate
        <div>
            <h1> {translate('hello', { name: 'Rishu' })} </h1>
            <h3> {translate('welcome')} </h3>
        </div>
    )
}


// outputs:
<div>
    <h1> हैलो Rishu, आज आप कैसा महसूस कर रहे हैं? </h1>
    <h3> स्वागत है </h3>
</div>
```


## Special Note for React-Native Users

Since this library doesn't need to be linked in order to get the device's locale

below method can be used to fetch the langauge set on the device

Source - [StackOverflow](https://stackoverflow.com/a/47349998/3293927)

```js
import { Platform, NativeModules } from 'react-native';

function getLocale() {
    const deviceLanguage =
        Platform.OS === 'ios'
            ? NativeModules.SettingsManager.settings.AppleLocale ||
            NativeModules.SettingsManager.settings.AppleLanguages[0] //iOS 13
            : NativeModules.I18nManager.localeIdentifier;

    return deviceLanguage.replace(/_/, '-');
}

changeLanguage(getLocale());
```

## Translate outside react component

```js
// this works in any utils function which is outside of context tree or non component method
import { Tranlate } from 'react-native';

const translatedMessage= Translate('your_key');
```

---
_Source: https://npm.io/package/react-locale-language · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._