# react-hola

> simple translation react component

Latest version **0.1.9** (published 2017-07-07) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.9 |
| Published | 2017-07-07 |
| First published | 2017-06-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | n7best |
| Maintainers | n7best |
| Keywords | react, translation, intl |

## Links

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

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^15.6.1
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10
- [es6-promise](https://npm.io/package/es6-promise.md) ^4.1.1
- [isomorphic-fetch](https://npm.io/package/isomorphic-fetch.md) ^2.2.1

## 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.1.9 (latest) — 2017-07-07
- 0.1.8 — 2017-07-07
- 0.1.7 — 2017-07-07
- 0.1.6 — 2017-07-07
- 0.1.5 — 2017-06-29
- 0.1.4 — 2017-06-29
- 0.1.3 — 2017-06-29
- 0.1.2 — 2017-06-29
- 0.1.1 — 2017-06-29
- 0.0.1 — 2017-06-29

## README

![react-hola](https://images.unsplash.com/photo-1489945052260-4f21c52268b9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=13d43906e3e3a60c9c7099f4e30b8d09)

# react-hola
simple react language translation

### Quick Start

```
npm install -save react-hola
```

#### Basic Usage

```javascript
import React from 'react';
import { InternationalProvider, WithTranslation } from 'react-hola';

//define language
const languagesData = {
  "en-US": {
    "main": {
      "title": "hello world",
      "greet": "hello {{ name }}"
    }
  }
}

//define a custom component
const helloWorld = props => (
  <div>
    <h2>{ props.langs.title }</h2>
    <p>{ props.langs.greet({ name: 'charlie'})}</p>
  </div>
)

//generate new component with HOC
const HelloWorld = WithTranslation(helloWorld, 'main')

//will output hello world and hello charlie
const App = () => (
  <InternationalProvider data={languagesData} locale="en-US">
    <HelloWorld />
  </InternationalProvider>
);
```

#### Component level translations

```javascript
import React from 'react';
import { InternationalProvider, WithTranslation } from 'react-hola';

//define language
const languagesData = {
  "en-US": {
    "main": {
      "helloWorld": {
        "title": "hello world",
        "greet": "hello {{ name }}"
      }
    }
  }
}

//define a custom component
const helloWorld = props => (
  <div>
    <h2>{ props.langs.title }</h2>
    <p>{ props.langs.greet({ name: 'charlie'})}</p>
  </div>
)

//access component translation using dot notation
const HelloWorld = WithTranslation(helloWorld, 'main.helloWorld')

//will output hello world and hello charlie
const App = () => (
  <InternationalProvider data={languagesData} locale="en-US">
    <HelloWorld />
  </InternationalProvider>
);
```

#### Share translation among component

```javascript
import React from 'react';
import { InternationalProvider, WithTranslation } from 'react-hola';

//define language
const languagesData = {
  "en-US": {
    "share": {
      "UI": {
        "title": "hello world"
      }
    }
    "main": {
      "helloWorld": {
        "greet": "hello {{ name }}"
      }
    }
  }
}

//define a custom component
const helloWorld = props => (
  <div>
    <h2>{ props.langs.title }</h2>
    <p>{ props.langs.greet({ name: 'charlie'})}</p>
  </div>
)

//access multiple component translation
const HelloWorld = WithTranslation(helloWorld, ['main.helloWorld', 'share,UI'])

//will output hello world and hello charlie
const App = () => (
  <InternationalProvider data={languagesData} locale="en-US">
    <HelloWorld />
  </InternationalProvider>
);
```

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