Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/andrepolischuk/react-translate-text
React higher-order component for text translation
https://github.com/andrepolischuk/react-translate-text
hoc i18n internationalization intl react translate translation
Last synced: 26 days ago
JSON representation
React higher-order component for text translation
- Host: GitHub
- URL: https://github.com/andrepolischuk/react-translate-text
- Owner: andrepolischuk
- License: mit
- Created: 2017-11-23T16:59:17.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-05-03T14:30:45.000Z (over 6 years ago)
- Last Synced: 2024-12-09T15:58:15.167Z (about 2 months ago)
- Topics: hoc, i18n, internationalization, intl, react, translate, translation
- Language: JavaScript
- Size: 14.6 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-translate-text [![Build Status][travis-image]][travis-url]
> React higher-order component for text translation
## Install
```sh
npm install --save react-translate-text
```
## Usage
In component:
```js
import React from 'react'
import {withTranslate} from 'react-translate-text'
function App ({age, message, translate}) {
return (
{translate('hello')}
{translate('echo', message)}
{translate('more.age', age)}
)
}
export default withTranslate(App)
```
In root:
```js
import React from 'react'
import {render} from 'react-dom'
import pluralize from 'numd'
import {TranslateProvider} from 'react-translate-text'
import App from './App'
const translation = {
hello: 'Hello',
echo: 'You say: $1',
more: {
age: 'I\'m a (pluralize $1|year|years) old'
}
}
render(
,
document.querySelector('#root')
)
```
## API
Under the hood `react-translate-text` uses `translate-text`.
It's a simple translate function with templates precompiling and helpers.
You can find API docs [in its repository][translate-text].
### TranslateProvider
A higher-order component passes translate function by the context.
#### props
##### props.translation
Type: `object`
Translation templates.
##### props.helpers
Type: `object`
Helper functions that are used in templates.
##### props.translate
Type: `func`
Translate function.
##### props.children
*Required*
Type: `element`
### withTranslate(component)
Create a higher-order component to connect your component to translate.
#### component
Type: `element`
### createTranslate(translation[, helpers])
You can create translate function earlier and pass it into the ``.
[Read more about `createTranslate` in `translate-text`'s docs][create-translate].
## Related
* [translate-text][translate-text] — translate function with templates precompiling and helpers
## License
MIT
[travis-url]: https://travis-ci.org/andrepolischuk/react-translate-text
[travis-image]: https://travis-ci.org/andrepolischuk/react-translate-text.svg?branch=master
[translate-text]: https://github.com/andrepolischuk/translate-text
[create-translate]: https://github.com/andrepolischuk/translate-text#createtranslatetranslation-fns