Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yeojz/redux-intl-react
React bindings for localization with ICU MessageFormat using redux-intl-connect
https://github.com/yeojz/redux-intl-react
i18n internationalization localization react redux
Last synced: 7 days ago
JSON representation
React bindings for localization with ICU MessageFormat using redux-intl-connect
- Host: GitHub
- URL: https://github.com/yeojz/redux-intl-react
- Owner: yeojz
- License: other
- Created: 2017-02-27T10:57:41.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-04-13T16:40:33.000Z (over 6 years ago)
- Last Synced: 2024-10-28T22:14:32.912Z (15 days ago)
- Topics: i18n, internationalization, localization, react, redux
- Language: JavaScript
- Homepage:
- Size: 93.8 KB
- Stars: 1
- Watchers: 1
- Forks: 3
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# redux-intl-react
React bindings for localization with MessageFormat and optional ECMA Intl support using redux-intl-connect.
[![Build Status][build-badge]][build-link]
[![Coverage Status][coveralls-badge]][coveralls-link]
[![npm package][npm-badge]][npm-link]
[![PRs Welcome][pr-welcome-badge]][pr-welcome-link]
## PSA
If you're looking to support [react-intl](https://github.com/yahoo/react-intl) in redux, please use [react-intl-redux](https://github.com/ratson/react-intl-redux) instead.
The main difference between this library and the aforementioned is that this does not depend on the availability of ECMA Intl or it's polyfill.
## About
`redux-intl-react` provides React specific bindings for localization using [redux-intl-connect](https://www.github.com/yeojz/redux-intl-connect) with [MessageFormat](http://userguide.icu-project.org/formatparse/messages) support.
Basic functionality **does not** require browser support or polyfill for [ECMA-Intl](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Intl). Should you require those, you can enable it. By setting `ecmaSupport` to `true` in the reducer.
## Installation
Install the library:
```
npm install redux-intl-react redux react --save
```
## Usage
```js
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider, FormattedMessage} from 'redux-intl-react'
import store from '/store'
const App = () => (
);
ReactDOM.render(, document.getElementById('container'));
```
## Alias methods
Both `updateIntl` and `intlReducer` are aliased in this library. As such, you can do the following:
```js
import {updateIntl, intlReducer} from 'redux-intl-react';
```
instead of
```js
import {updateIntl, intlReducer} from 'redux-intl-connect';
```
For usage instructions, please refer to the [README](https://github.com/yeojz/redux-intl-connect/blob/master/README.md#available-methods) of `redux-intl-connect`
## Convenience methods
This library provides some components for convenince. These are essentially Higher Order Functions over `react-redux`;
### connect vs Redux connect
Instead of doing the following:
```js
import {injectIntl} from 'redux-intl-react';
import connect from 'react-redux';
const Component = (props) => (
...code
);
export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(Component));
```
you can do this instead:
```js
import {connect} from 'redux-intl-react';
const Component = (props) => (
...code
);
export default connect(mapStateToProps, mapDispatchToProps)(Component);
```
### Provider vs IntlProvider
`Provider` is just a convenient wrapper for use if you are using `react-redux` provider as your root.
In the event that you already have a custom provider in use that already wraps the redux provider, you can use IntlProvider instead.
```js
import React from 'react';
import {IntlProvider} from 'redux-intl-react';
import {Provider} from 'SOME_SPECIAL_PROVIDER';
const App = () => (
);
```
## License
`redux-intl-react` is [BSD licensed](./LICENSE)
## See also
- [redux-intl-connect](https://www.github.com/yeojz/redux-intl-connect)
## Acknowledgement
Highly influenced by the following libraries:
- [react-intl](https://github.com/yahoo/react-intl)
- [react-intl-redux](https://github.com/ratson/react-intl-redux)
[npm-badge]: https://img.shields.io/npm/v/redux-intl-react.svg?style=flat-square
[npm-link]: https://www.npmjs.com/package/redux-intl-react
[build-badge]: https://img.shields.io/circleci/project/github/yeojz/redux-intl-react/master.svg?style=flat-square
[build-link]: https://circleci.com/gh/yeojz/redux-intl-react.svg
[coveralls-badge]: https://img.shields.io/coveralls/yeojz/redux-intl-react.svg?style=flat-square
[coveralls-link]: https://coveralls.io/github/yeojz/redux-intl-react
[pr-welcome-badge]: https://img.shields.io/badge/PRs-Welcome-ff69b4.svg?style=flat-square
[pr-welcome-link]: https://github.com/yeojz/redux-intl-react/blob/master/CONTRIBUTING.md