# localization-react

> Easy package that allows localization with React

Latest version **1.2.5** (published 2021-11-04) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install localization-react
pnpm add localization-react
yarn add localization-react
bun add localization-react
```

## 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.2.5 |
| Published | 2021-11-04 |
| First published | 2021-05-20 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=8 |
| Dependencies | 0 |
| Unpacked size | 24.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Joni Rinta-Kahila |
| Maintainers | rintsin |
| Keywords | react, typescript, localization, translator, npm |

## Links

- npm: https://www.npmjs.com/package/localization-react
- Repository: https://github.com/JoniRinta-Kahila/localization-react
- Homepage: https://github.com/JoniRinta-Kahila/localization-react#readme
- Issues: https://github.com/JoniRinta-Kahila/localization-react/issues
- npm.io page: https://npm.io/package/localization-react

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.2.5 (latest) — 2021-11-04
- 1.2.4 — 2021-11-01
- 1.2.3 — 2021-11-01
- 1.2.2 — 2021-11-01
- 1.1.2 — 2021-11-01
- 1.1.1 — 2021-10-25
- 1.1.0 — 2021-10-25
- 1.0.0 — 2021-05-20

## README

# react-localization

`npm i localization-react`

## languages.ts
```ts
// add supported languages here
const Languages = {
  FI: 'fi',
  EN: 'en',
}

export default Languages;

```

## locales.json
```json
{
  "EN": {
    "home": {
      "string_1": "Hello, World!",
      "string_2": "This is English."
    }
  },
  "FI": {
    "home": {
      "string_1": "Hei, Maailma!",
      "string_2": "Tämä on Suomea."
    }
  }
}
```

## app.tsx

```ts
import React from 'react';
import LocalizationContextProvider from 'localization-react';
import Languages from './localization/languages';
import LanguageSwitch from './localization/LanguageSwitch';
import Home from './home';

const App: React.FC = () => {
  return (
    <LocalizationContextProvider languageList={Languages} defaultLanguage='FI'>
      <LanguageSwitch />
      <Home />
    </LocalizationContextProvider>
  )
}

export default App;

```

## Home.tsx, translated page

```ts
import React from 'react';
import { Translator, useLocalization } from 'localization-react';
import localesJson from './localization/locales.json';

const Home: React.FC = () => {
  const localization = useLocalization();
  const translator = new Translator(localesJson, 'home', localization.language);
  return (
    <div>
      <h1>{translator.getLocaleString('string_1')}</h1>
      <h1>{translator.getLocaleString('string_2')}</h1>
    </div>
  )
}

export default Home;

```

## languageSwitch.tsx, switch between languages

```ts
import React from 'react';
import { useLocalization } from 'localization-react';

const LanguageSwitch: React.FC = () => {
  const localization = useLocalization();
  const radioHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
    console.log(event.target.value)
    localization.selectLanguage(event.target.value);
  };
  return (
    <div>
      <input
        type='radio'
        value='EN'
        name='lang'
        id='en'
        checked={localization.language === "EN"}
        onChange={radioHandler}
      />
      <label htmlFor='en'>English</label>
      <input
        type='radio'
        value='FI'
        name='lang'
        id='fi'
        checked={localization.language === "FI"}
        onChange={radioHandler}
      />
      <label htmlFor='fi'>Finnish</label>
    </div>
  )
}

export default LanguageSwitch;

```

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