# react-context-i18n

> Translate your React APP with with use of new Context API ^^

Latest version **0.3.3** (published 2020-12-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-context-i18n
pnpm add react-context-i18n
yarn add react-context-i18n
bun add react-context-i18n
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.3 |
| Published | 2020-12-14 |
| First published | 2018-04-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 22.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | bumpah |
| Maintainers | bumpah |
| Keywords | gettext, i18n, internationalization, react, context, react context api, react native, reactjs, translation |

## Links

- npm: https://www.npmjs.com/package/react-context-i18n
- Repository: https://github.com/bumpah/react-context-i18n
- Homepage: https://github.com/bumpah/react-context-i18n#readme
- Issues: https://github.com/bumpah/react-context-i18n/issues
- npm.io page: https://npm.io/package/react-context-i18n

## 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

- 0.3.3 (latest) — 2020-12-14
- 0.4.0-alpha.3 (alpha) — 2021-02-24
- 0.4.0-alpha.2 — 2021-02-24
- 0.4.0-alpha.1 — 2021-02-16
- 0.4.0-alpha.0 — 2021-02-16
- 0.3.2 — 2020-12-14
- 0.3.1 — 2020-12-14
- 0.3.0 — 2020-12-14
- 0.2.1 — 2019-10-21
- 0.2.0 — 2019-10-21
- 0.1.6 — 2018-06-04
- 0.1.5 — 2018-05-06
- 0.1.4 — 2018-05-06
- 0.1.3 — 2018-05-06
- 0.1.2 — 2018-05-06
- … 8 more at https://npm.io/package/react-context-i18n/versions

## README

### TO NOTE

Version `0.2.0` of library uses `React.js@16.7.0` new hooks implementation and therefore requires verson `^16.7.0-aplha.0` or latter of React to be used. 
> IF YOU WAN'T TO CONTINUE TO USE THIS LIBRARY WITH >=16.3 VERSION OF REACT, USE VERSION `0.1.6` OF THIS PACKAGE


# react-context-i18n

[![Build Status](https://travis-ci.org/bumpah/react-context-i18n.svg?branch=master)](https://travis-ci.org/bumpah/react-context-i18n) [![Coverage Status](https://coveralls.io/repos/github/bumpah/react-context-i18n/badge.svg?branch=master)](https://coveralls.io/github/bumpah/react-context-i18n?branch=master) [![devDependencies Status](https://david-dm.org/bumpah/react-context-i18n/dev-status.svg)](https://david-dm.org/bumpah/react-context-i18n?type=dev)

### Uses new React Context API so requires use of React version >=16.3.0
React translation component inspired by react-gettext component.
Only uses React as peer dependency and no other dependencies



### NEW FEATURES

Inject JSX and translations inside translatable content

```
// Example dictionary
const json = {
  'Click link': 'press me',
  'Trans me!': 'im a link',
}

<I18 vars={[
  () => <a href="#"><I18 t="Trans me!"/></a>
]}>Click link ${link}</I18>

// => `press me <a href="#">im a link</a>
```


## Basic use

Component exposes `ConsumeLanguage` & `withLanguageContext`

ConsumeLanguage is React Component which does translation

withLanguageContext is Funtion HOC which provides translation Context


### example default usage
```
import { ConsumeLanguage as I18, withLanguageContext } from 'react-context-i18n'

const translatables = {
  test: 'testi',
}

const App = () => (
 <div>
   <I18>test</I18>
 </div>
)

const Comp = withLanguageContext(translatables)(App)

# App provides text 'testi'
```

### Inject variable and match object key with placeholders text
```
const translatables = {
  'test ${username}': 'testi ${username}',
}

const App = () => (
 <div>
   <I18 vars={{username: 'jest'}}>test ${username}</I18>
 </div>
)
# Provides 'testi jest'
```
### Inject variables from array and only care ${} with anything inside 
```
# OR with array
const App = () => (
 <div>
   <I18 vars={['jest']}>test ${username}</I18>
 </div>
)
# Provides same output 'testi jest'
```
### Add custom prefix or suffix to string which won't affect to translation
```
const translatables = {
  test: 'testi',
}

const Wrapper = () => (
  <div>
    <Trans text="test" s=" suffix" p="prefix " />
  </div>
)
# Provides 'prefix testi suffix', and doesn't try translate prefix or suffix opinnions
# Alternative pre="prefix" suf="suffix" OR suffix="suffix" prefix="prefix"
```

### Translate with different context 
```
const translatables = {
  'test ${username}': 'testi ${username}',
  reservation: {
    'test ${username}': 'reservation test ${username}',
  }
}

const Wrapper = () => (
  <div>
    <Trans text="test ${username}" vars={{username: 'jest'}} context="reservation" />
  </div>
)
# Provides 'reservation test jest'
```

### Preferrably use this kind of translatables markup
```
{
  default: {
    // [non-context-translations]
    name: "1"
  },
  reservation: {
    // [context 1]
    name: "2"
  },
  payment: {
    // [context 2]
    name: "3"
  }
}
```

- 0.0.3

There is now also new `makeDictionary` -function exposed which takes Array with formed as 

```
const dicJson = [
  { json: { someting: 'to convert' } },
  { json: { someting: 'else to convert' } , context: 'pay'},
]
```

and returns JSON Object which can be consumed by `withLanguageContext` -function.


#### Example of using state to toggle translations json https://codesandbox.io/s/clever-wood-8jlel


```
import React from "react";
import "./styles.css";
import {
  ConsumeLanguage as I18,
  withLanguageContext
} from "react-context-i18n";

const translations = {
  en: {},
  fi: {
    "Hello World!": "Hei Maailma"
  }
};
const languages = Object.keys(translations);

function Wrapper() {
  const [lang, setLang] = React.useState(languages[0]);

  function switchLanguage() {
    const toggle = languages.find(item => item !== lang);
    setLang(toggle);
  }

  const Comp = withLanguageContext(translations[lang])(App);
  return <Comp switchLanguage={switchLanguage} lang={lang} />;
}

function App({ switchLanguage, lang }) {
  return (
    <div className="App">
      <button onClick={switchLanguage}>Switch language: {lang}</button>
      <I18>Hello World!</I18>
    </div>
  );
}

export default Wrapper;
```

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