{"id":22308814,"url":"https://github.com/ratson/react-intl-redux","last_synced_at":"2025-05-16T12:10:14.882Z","repository":{"id":3840563,"uuid":"51075076","full_name":"ratson/react-intl-redux","owner":"ratson","description":"Redux binding for React Intl.","archived":false,"fork":false,"pushed_at":"2024-03-09T12:03:46.000Z","size":105,"stargazers_count":295,"open_issues_count":5,"forks_count":43,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-05-13T01:43:30.509Z","etag":null,"topics":["i18n","react","react-intl","redux"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ratson.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-02-04T12:38:30.000Z","updated_at":"2025-02-27T14:26:46.000Z","dependencies_parsed_at":"2024-06-18T12:44:39.313Z","dependency_job_id":null,"html_url":"https://github.com/ratson/react-intl-redux","commit_stats":{"total_commits":140,"total_committers":10,"mean_commits":14.0,"dds":0.0714285714285714,"last_synced_commit":"dd5062e00c6e4a4dbdd73a157dd797d9792b64ab"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ratson%2Freact-intl-redux","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ratson%2Freact-intl-redux/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ratson%2Freact-intl-redux/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ratson%2Freact-intl-redux/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ratson","download_url":"https://codeload.github.com/ratson/react-intl-redux/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254433527,"owners_count":22070487,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["i18n","react","react-intl","redux"],"created_at":"2024-12-03T20:15:27.132Z","updated_at":"2025-05-16T12:10:14.866Z","avatar_url":"https://github.com/ratson.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# React Intl Redux\n\n[Redux](https://github.com/reactjs/redux) binding for [React Intl](https://github.com/yahoo/react-intl).\n\nBuilding idiomatic React Redux Application by\nhaving translations in store and dispatching action to update it.\n\n## Installation\n\n```\nnpm install react-intl-redux react react-intl react-redux redux --save\n```\n\n## Usage\n\n\u003c!-- eslint-env browser --\u003e\n\u003c!-- eslint-disable no-undef --\u003e\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { createStore, combineReducers } from 'redux'\nimport { FormattedNumber } from 'react-intl'\nimport { Provider, intlReducer } from 'react-intl-redux'\nimport reducers from '\u003cproject-path\u003e/reducers'\n\nconst reducer = combineReducers({\n  ...reducers,\n  intl: intlReducer,\n})\n\nconst store = createStore(reducer)\n\nconst App = () =\u003e (\n  \u003cProvider store={store}\u003e\n    \u003cFormattedNumber value={1000} /\u003e\n  \u003c/Provider\u003e\n)\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById('container'))\n```\n\n### Provide `locale` and `messages` on load\n\nYou should provide a different `locale` and `messages` if your user is not using `en` locale.\n\n\u003c!-- eslint-disable no-undef, no-unused-vars --\u003e\n\n```js\nconst initialState = {\n  intl: {\n    locale: 'it',\n    messages: {\n      'app.greeting': 'Ciao!',\n    },\n  },\n  // ...other initialState\n}\nconst store = createStore(reducer, initialState)\n```\n\nRefer to the [`initial-locale` example](https://github.com/ratson/react-intl-redux/tree/master/examples/initial-locale) for more details.\n\n### Switch `locale` and `messages` on request\n\nYou could also switch `locale` on user's request by dispatching `updateIntl` action.\n\n\u003c!-- eslint-disable no-undef --\u003e\n\n```js\nimport { updateIntl } from 'react-intl-redux'\n\nstore.dispatch(updateIntl({\n  locale,\n  messages,\n}))\n```\n\nReact Intl in browsers only contain locale data for basic English\nby default, see\n[Loading Locale Data](https://github.com/yahoo/react-intl/wiki#loading-locale-data)\nfor loading locale data in browsers.\n\n### `Provider` vs `IntlProvider`\n\nIn most cases, `react-intl-redux` will be wrapped immediately after `Provider` from `react-redux`. For convenient, `react-intl-redux` provides `Provider` to do that for you.\n\nHowever, if you don't want it, you could do it manually via [`IntlProvider`](https://github.com/yahoo/react-intl/wiki/Components#intlprovider). For example,\n\n\u003c!-- eslint-disable no-undef --\u003e\n\n```js\nimport React from 'react'\nimport { IntlProvider } from 'react-intl-redux'\nimport { Provider } from 'react-redux'\n\nconst App = () =\u003e (\n  \u003cProvider store={store}\u003e\n    \u003cIntlProvider\u003e\n      \u003cApp /\u003e\n    \u003c/IntlProvider\u003e\n  \u003c/Provider\u003e\n)\n```\n\n### Formatting Data\n\n`react-intl` provides two ways to format data, see the [official docs](https://github.com/yahoo/react-intl/wiki#formatting-data).\n\nTo change `formats` through [React components](https://github.com/yahoo/react-intl/wiki/Components),\n\n\u003c!-- eslint-disable no-undef --\u003e\n\n```js\nimport { updateIntl } from 'react-intl-redux'\n\nstore.dispatch(updateIntl({\n  locale,\n  formats,\n  messages,\n}))\n```\n\n### Use with `redux-immutable`\n\nSee the usage in [test](https://github.com/ratson/react-intl-redux/blob/master/test/immutable.spec.js).\n\n## Examples\n\nThere are some examples under the [`examples`](./examples) folder for reference.\n\n## Troubleshooting\n\n1. Why my connected component does not update after locale change?\n\n  By default, `locale` is used as `key` for `IntlProvider`, which will trigger re-render when locale changes, things should just work.\n\n  If it doesn't, here are few solutions could be tried,\n\n  * Do a `forceUpdate` after changing locale.\n  * Mark the connecting compoent `{pure: false}`.\n  * Pass `locale` in `props`.\n  * Set `key` when dispatching `updateIntl`.\n  * Provide custom `intlSelector` for `IntlProvider`.\n\n2. How to use `intl` in asynchronous action?\n\n  A simple solution would be retrive `intl` object using [`injectIntl`](https://github.com/yahoo/react-intl/wiki/API#injection-api) and pass it in the action payload.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fratson%2Freact-intl-redux","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fratson%2Freact-intl-redux","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fratson%2Freact-intl-redux/lists"}