# react-multi-lang

> React Multilanguage Higher-Order Component

Latest version **2.2.0** (published 2022-11-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-multi-lang
pnpm add react-multi-lang
yarn add react-multi-lang
bun add react-multi-lang
```

## 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 | 2.2.0 |
| Published | 2022-11-16 |
| First published | 2017-11-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 13.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 16 |
| Author | João Moura |
| Maintainers | jwebcoder |
| Keywords | react, translations, translation, i18n |

## Links

- npm: https://www.npmjs.com/package/react-multi-lang
- Repository: https://github.com/JWebCoder/react-multi-lang
- Homepage: https://github.com/JWebCoder/react-multi-lang#readme
- Issues: https://github.com/JWebCoder/react-multi-lang/issues
- npm.io page: https://npm.io/package/react-multi-lang

## Dependencies (1)

- [hoist-non-react-statics](https://npm.io/package/hoist-non-react-statics.md) ^3.3.2

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

- 2.2.0 (latest) — 2022-11-16
- 2.1.1 — 2020-04-06
- 2.1.0 — 2020-04-01
- 2.0.2 — 2020-03-23
- 2.0.1 — 2020-02-13
- 2.0.0 — 2020-02-13
- 1.0.7 — 2019-07-30
- 1.0.6 — 2019-06-16
- 1.0.5 — 2019-06-16
- 1.0.4 — 2019-06-16
- 1.0.3 — 2019-04-02
- 1.0.2 — 2018-05-17
- 1.0.1 — 2018-04-04
- 1.0.0 — 2018-04-04
- 0.2.2 — 2018-03-06
- … 8 more at https://npm.io/package/react-multi-lang/versions

## README

# react-multi-lang

React Multi-language component.

Works with React and React Native

## Installation

`npm i -S react-multi-lang`

## Usage

### Hook

See the example folder for better understanding

```tsx
import React from 'react'

// Translation Hook
import { setTranslations, setDefaultLanguage, useTranslation } from 'react-multi-lang'
import pt from 'pt.json'
import en from 'en.json'

// Do this two lines only when setting up the application
setTranslations({pt, en})
setDefaultLanguage('en')

const App: React.FC = () => {
  const t = useTranslation()
  return (
    <div>
      {t('home.Title')}
      {t('Hello', {name: 'João'})}
    </div>
  )
}

export default App
```

### Higher order component

```tsx
import React from 'react'

// Translation Higher Order Component
import { setTranslations, setDefaultLanguage, withTranslation } from 'react-multi-lang'
import pt from 'pt.json'
import en from 'en.json'
import type { T } from 'react-multi-lang'

// Do this two lines only when setting up the application
setTranslations({pt, en})
setDefaultLanguage('en')

type Props = {
  t: T
}

class SomeComponent extends React.Component<Props> {
  render () {
    const { t } = this.props
    return (
      <div>
        {t('home.Title')}
        {t('Hello', {name: 'João'})}
      </div>
    )
  }
}

export default withTranslation(SomeComponent)
```

## Auto update functions

### useTranslation(basePath)

React hook that returns the t function

Params | Type | Description | Required
---- | ---- | ---- | ----
basePath | string | translation base path used to identify all the next requested translations | no

### withTranslation(component, basePath)

HOC that injects the translation function into the component

Params | Type | Description | Required
---- | ---- | ---- | ----
component | React Component | React component that requires the translation function | yes
basePath | string | translation base path used to identify all the next requested translations | no

## Translation Method

t(path, params)

Returns the translation for the requested path

Params | Type | Description | Required
---- | ---- | ---- | ----
path | string | translation path that identifies the text | yes
params | object | {'param': 'value', ...} each parameter will be set on the string in its correct location | no

## Exported Methods

### setDefaultTranslations(translations)

Sets the translations

Params | Type | Description | Required
---- | ---- | ---- | ----
translations | object | {'key': 'translations', ...} | yes

### setTranslations(translations)

Same as setDefaultTranslations, but this will update all components using translations

Params | Type | Description | Required
---- | ---- | ---- | ----
translations | object | {'key': 'translations', ...} | yes

### setDefaultLanguage(key)

Sets the default application language

Params | Type | Description | Required
---- | ---- | ---- | ----
key    | string | translation key, in this example 'en' or 'pt' | yes

### setLanguage(key)

Same as setDefaultLanguage, but this will update all components using translations

Params | Type | Description | Required
---- | ---- | ---- | ----
key    | string | translation key, in this example 'en' or 'pt' | yes

### getLanguage()

Returns the current selected language

### t(key, params)

t(path, params)

Returns the translation for the requested path

Params | Type | Description | Required
---- | ---- | ---- | ----
path | string | translation path that identifies the text | yes
params | object | {'param': 'value', ...} each parameter will be set on the string in its correct location | no

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