React bindings for localization with MessageFormat and optional ECMA Intl support using redux-intl-connect.
If you're looking to support react-intl in redux, please use 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.
redux-intl-react
provides React specific bindings for localization using redux-intl-connect with MessageFormat support.
Basic functionality does not require browser support or polyfill for ECMA-Intl. Should you require those, you can enable it. By setting ecmaSupport
to true
in the reducer.
Install the library:
npm install redux-intl-react redux react --save
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider, FormattedMessage} from 'redux-intl-react'
import store from '<project-path>/store'
const App = () => (
<Provider store={store}>
<FormattedMessage id='translation_id' />
</Provider>
);
ReactDOM.render(<App />, document.getElementById('container'));
Both updateIntl
and intlReducer
are aliased in this library. As such, you can do the following:
import {updateIntl, intlReducer} from 'redux-intl-react';
instead of
import {updateIntl, intlReducer} from 'redux-intl-connect';
For usage instructions, please refer to the README of redux-intl-connect
This library provides some components for convenince. These are essentially Higher Order Functions over react-redux
;
Instead of doing the following:
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:
import {connect} from 'redux-intl-react';
const Component = (props) => (
...code
);
export default connect(mapStateToProps, mapDispatchToProps)(Component);
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.
import React from 'react';
import {IntlProvider} from 'redux-intl-react';
import {Provider} from 'SOME_SPECIAL_PROVIDER';
const App = () => (
<Provider store={store}>
<IntlProvider>
<App />
</IntlProvider>
</Provider>
);
redux-intl-react
is BSD licensed
Highly influenced by the following libraries: