File Manager

Editing File: /home/ubuntu/voice-assistant-frontend/node_modules/react-multi-lang/README.md

# 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

Back to Directory File Manager