{"id":22327138,"url":"https://github.com/tiqa/redux-polyglot","last_synced_at":"2025-07-08T11:05:56.835Z","repository":{"id":54201977,"uuid":"70259874","full_name":"Tiqa/redux-polyglot","owner":"Tiqa","description":"Polyglot.js bindings for Redux","archived":false,"fork":false,"pushed_at":"2023-08-28T12:07:45.000Z","size":464,"stargazers_count":58,"open_issues_count":32,"forks_count":13,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-07-06T09:14:16.013Z","etag":null,"topics":["bindings","i18n","javascript","middleware","polyglot","react","redux","redux-polyglot","translation"],"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/Tiqa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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-10-07T15:36:16.000Z","updated_at":"2023-07-27T12:01:41.000Z","dependencies_parsed_at":"2024-06-19T02:42:09.531Z","dependency_job_id":"07b8e195-d9b8-4926-a01b-0d72a853dc62","html_url":"https://github.com/Tiqa/redux-polyglot","commit_stats":null,"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"purl":"pkg:github/Tiqa/redux-polyglot","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tiqa%2Fredux-polyglot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tiqa%2Fredux-polyglot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tiqa%2Fredux-polyglot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tiqa%2Fredux-polyglot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Tiqa","download_url":"https://codeload.github.com/Tiqa/redux-polyglot/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tiqa%2Fredux-polyglot/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264257664,"owners_count":23580469,"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":["bindings","i18n","javascript","middleware","polyglot","react","redux","redux-polyglot","translation"],"created_at":"2024-12-04T03:08:26.080Z","updated_at":"2025-07-08T11:05:56.814Z","avatar_url":"https://github.com/Tiqa.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# redux-polyglot\n\n[ ![Codeship Status for Tiqa/redux-polyglot](https://app.codeship.com/projects/21623df0-8959-0134-75f2-0e35097499a9/status?branch=master)](https://app.codeship.com/projects/184177)\n\nToolset (actions, reducer, middleware, enhancer, selectors) to help use Polyglot with Redux.\n\n## Installation\n```\n    npm install --save redux-polyglot\n```\n## Setup\n\nFirst of all, you need the polyglot reducer in your rootReducer :\n```javascript\nimport { createStore, combineReducers } from 'redux';\nimport { polyglotReducer } from 'redux-polyglot';\n\nconst rootReducer = combineReducers({\n    ...yourReducers,\n    polyglot: polyglotReducer,\n});\nconst store = createStore(rootReducer, {});\n\n```\n## Usage\n\n### Set the language\n#### without middleware\nYou can use redux-polyglot without his middleware, for this you need the `setLanguage()` action creator :\n\n- ```setLanguage :: (String, Object) -\u003e Action```\n\nExample:\n```javascript\nimport { setLanguage } from 'redux-polyglot';\n\nstore.dispatch(setLanguage('en', { yolo: 'yolo' }));\n```\nsecond parameter should be `polyglot phrases` (see [polyglot documentation](http://airbnb.io/polyglot.js/))\n\nnote: if language phrases already exists, this will overwrite the corresponding object state.\n\n#### with middleware\nThe `createPolyglotMiddleware()` function allow you to automatically update language and phrases by listening to specific action(s).\n\nThe middleware catches specific action(s), and find the locale in the payload, and then [asynchronously] load the `polyglot phrases` (with Promise).\n\nIt takes 3 parameters and return a middleware :\n- 1 - `actionToCatch :: String | Array\u003cString\u003e`\n    - the type(s) of the action to catch\n- 2 - `getLocale :: Object -\u003e String`\n    - a function that take the catched action as parameter and return new language.\n- 3 - `getPhrases :: String -\u003e Promise Object`\n    - a function that take the language (as provided by `getLocale`) and return a Promise of Object ( Object should be `polyglot phrases` )\n\nthe middleware will catch `actionToCatch`; note: when a matching action is dispatched, it will return this promise called so you can await on it (pretty useful on SSR)\n\n```javascript\nimport { createStore, combineReducers, applyMiddleware } from 'redux';\n\nconst polyglotMiddleware = createPolyglotMiddleware(\n    'ACTION_TO_CATCH',\n    action =\u003e action.payload.locale,\n    locale =\u003e new Promise(resolve =\u003e {\n        // perform async here\n        resolve({\n            hello: 'bonjour',\n        });\n    }),\n)\n\nconst store = createStore(rootReducer, {}, applyMiddleware(polyglotMiddleware));\n```\n\nyou can catch more than one action passing an array of action types:\n```javascript\nconst polyglotMiddleware = createPolyglotMiddleware(\n    ['FIRST_ACTION_TO_CATCH', 'SECOND_ACTION_TO_CATCH'],\n    getLocale,\n    getPhrases,\n)\n```\n\nnote: if language has not changed, nothing happens.\n\n### Translation\n#### with getP() selector\nYou can use the `getP(state)` selector.\n\nIt returns an object with 4 functions inside :\n- t: String -\u003e String : translation (the original polyglot `t` function)\n- tc: String -\u003e String : translation capitalized\n- tt: String -\u003e String : translation titleized\n- tu: String -\u003e String : translation upper-cased\n- tm: (String -\u003e String) -\u003e String -\u003e String :  translation using a custom morphism\n\n(see [polyglot documentation](http://airbnb.io/polyglot.js/))\n\nthere is an optional parameter to getP().\nthis is allow you to automatically 'aim' a scope in your phrases object using `polyglotScope` property.\n\nfor example :\n\n```js\nstore.dispatch(setLanguage('en', {\n    some: { nested: { data: { hello: 'hello' } } }\n}));\nconst p = getP(store.getState(), { polyglotScope: 'some.nested.data' });\nconsole.log(p.tc('hello')) // =\u003e will return 'Hello'\n```\n\n#### Getting current locale\n`getLocale(state)` selector returns current language.\n\n#### If you use React\n\nYou can use `connect()` from `react-redux`, and the getP() selector, to get the `p` prop in your component.\n\nProptype:\n````javascript\np: PropTypes.shape({\n    t: PropTypes.func.isRequired,\n    tc: PropTypes.func.isRequired,\n    tu: PropTypes.func.isRequired,\n    tm: PropTypes.func.isRequired,\n}),\n````\n\n##### translate() enhancer\n`props.p` can be also be provided easily to a component with the translate enhancer :\n```javascript\nimport translate from 'redux-polyglot/translate';\nconst DummyComponentWithPProps = translate(DummyComponent);\n```\n\nyou can select a `polyglotScope` with `translate('scope', Component)`\n```js\n// all this lines return an enhanced Dummy component\ntranslate(Dummy);\ntranslate('catalog', Dummy); // with polyglotScope\ntranslate()(Dummy); // curried\ntranslate('catalog')(Dummy); // curried with polyglotScope.\ntranslate({ polyglotScope : 'some.nested.data', ownPhrases: 'some.nested.data.hello': 'Hi !', ... })(Dummy); // curried with object configuration.\n```\n\n##### get locale in a component\nYou can use the `getLocale()` selector inside a [mapStateToProps](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) from react-redux.\n\nProptype: ````locale: PropTypes.string,````\n\n### Overwrite phrases\nIn some case, you should be able to replace some default phrases by others phrases.\n\nFor doing this, you have to define an object which contains your overwrited phrases.\nThis object is composed of : ``` { 'some.nested.data': 'phrase', ... }``` where `key` is the target path you want to replace and `value` ... the new value.\n\n##### with _getP()_ selector\nSimply add `ownPhrases` property and set the new configuration like above to overwrite  :\n```js\nstore.dispatch(setLanguage('en', {\n    some: { nested: { data: { hello: 'hello' } } }\n}));\nconst p = getP(store.getState(), {\n    polyglotScope: 'some.nested.data',\n    ownPhrases: { 'some.nested.data.hello': 'Hi !' }\n});\nconsole.log(p.tc('hello')) // =\u003e will return 'Hi !'\n```\n##### with _translate()_ enhancer\nInstead passing only _string_ as parameter : `translate('catalog', Dummy)`, pass a plain _object_ which contains `polyglotScope` and `ownPhrases` properties :\n```js\ntranslate({\n    polyglotScope : 'some.nested.data',\n    ownPhrases: { 'some.nested.data.catalog': 'Cars' }\n}, Dummy);\nconsole.log(p.tc('catalog')) // =\u003e will return 'Cars'\n```\n\n### Use polyglot options\nif you want to use `onMissingKey`, `allowMissing` or `warn` [polyglot](http://airbnb.io/polyglot.js/) options, you can use the `createGetP` factory selector to create a custom `getP`.\n\nusage :\n```js\nimport { createGetP } from 'redux-polyglot';\n\nconst options = {\n  allowMissing: true,\n}\n\nexport const getP = createGetP(options);\n```\n\nPlease note you cannot use translate hoc with a custom `getP` selector.\n\n## Team\n\nThese folks keep the project moving and are resources for help:\n\n* Jérémy Vincent ([@jvincent42](https://github.com/jvincent42)) - developer\n* Jalil Arfaoui ([@JalilArfaoui](https://github.com/JalilArfaoui)) - developer\n* Guillaume ARM ([@guillaumearm](https://github.com/guillaumearm/)) - developer\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftiqa%2Fredux-polyglot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftiqa%2Fredux-polyglot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftiqa%2Fredux-polyglot/lists"}