# context-multi-language

> Multi Language System for React and React Native

Latest version **1.0.15** (published 2020-08-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install context-multi-language
pnpm add context-multi-language
yarn add context-multi-language
bun add context-multi-language
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.15 |
| Published | 2020-08-17 |
| First published | 2020-08-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 24.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Burhan YILMAZ |
| Maintainers | burhanyilmaz_ |
| Keywords | react-native, react-native context api, multi language app, react native multi language app, react multi language app |

## Links

- npm: https://www.npmjs.com/package/context-multi-language
- Repository: https://github.com/burhanyilmaz/context-multi-language
- Homepage: https://github.com/burhanyilmaz/context-multi-language#readme
- Issues: https://github.com/burhanyilmaz/context-multi-language/issues
- npm.io page: https://npm.io/package/context-multi-language

## Recent versions

- 1.0.15 (latest) — 2020-08-17
- 1.0.14 — 2020-08-17
- 1.0.13 — 2020-08-17
- 1.0.12 — 2020-08-17
- 1.0.11 — 2020-08-14
- 1.0.10 — 2020-08-13
- 1.0.7 — 2020-08-12
- 1.0.6 — 2020-08-12
- 1.0.5 — 2020-08-12
- 1.0.4 — 2020-08-12
- 1.0.3 — 2020-08-11
- 1.0.2 — 2020-08-11
- 1.0.1 — 2020-08-11
- 1.0.0 — 2020-08-11

## README

# context-multi-language

This library is for providing Multi Language System for React and React Native Applications.

## Installation

```terminal
yarn add context-multi-language
```

```terminal
npm install context-multi-language
```

## Usage

Add SKIP_PREFLIGHT_CHECK=true to an .env file in your project if you get eslint error.


#### TranslationsProvider

```js
<TranslationsProvider
  remoteTranslationsUrl={remoteTranslationsUrl}
  defaultLocale="tr"
/>
```

| Prop                  | Type   | Default            | Description                                    |
| --------------------- | ------ | ------------------ | ---------------------------------------------- |
| translations          | object | undefined          | translations data                              |
| remoteTranslationsUrl | string | undefined          | fetch translations data from a remote endpoint |
| defaultLocale         | string | tr                 | default language                               |
| errorComponent        | FC     | TranslationsError  | default error component.                       |
| loadingComponent      | FC     | TranslationLoading | default loading component.                     |
| children              | FC     |                    | TranslationsProvider's children.               |

#### useTranslations

```js
const { t, changeLanguage, languages } = useTranslations();
```

| Prop           | Type     | Description                  |
| -------------- | -------- | ---------------------------- |
| t              | object   | provide translations data.   |
| changeLanguage | function | change current language.       |
| languages      | array    | existing languages. |

## Samples

```js
import { TranslationsProvider, useTranslations } from 'context-multi-language';

const remoteTranslationsUrl = 'https://raw.githubusercontent.com/burhanyilmaz/translations/master/locales.json';

export default () => (
    <TranslationsProvider remoteTranslationsUrl={remoteTranslationsUrl} defaultLocale='tr'>
      <HomeScreen />
    </TranslationsProvider>
);

// or

const translations = {
  "languages": ["en"],
  "translations": {
    "en": {
      "password": "Password",
      "phoneNumber": "Phone Number",
      "signIn": "Sign in!"
    },
}

export default () => (
    <TranslationsProvider translations={translations} defaultLocale='tr'>
      <HomeScreen />
    </TranslationsProvider>
);
```

```js
const HomeScreen = () => {
  const { t, changeLanguage, languages } = useTranslations();

  return (
    <SafeAreaView style={styles.fill}>
      <StatusBar barStyle="light-content" />
      <Input label={t.phoneNumber} />
      <Space />
      <Input label={t.password} secureTextEntry />
      <Space />
      <Button size="large">{t.singIn}</Button>
      <Space />
      <ButtonGroup>
        {languages.map((language) => (
          <Button
            key={language}
            size="tiny"
            onPress={() => changeLanguage(language)}
          >
            {language}
          </Button>
        ))}
      </ButtonGroup>
    </SafeAreaView>
  );
};
```

## SS

### React Native Mobile

<img src="assets/react-native.gif" width="600"  />

### React Web

<img src="assets/react.gif" width="600"  />

<img src="https://5kr2u.sse.codesandbox.io/flag?country=az" width="200"  />

## Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

## License

[MIT](https://choosealicense.com/licenses/mit/)

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