{"id":17937885,"url":"https://github.com/kwhitaker/react-simple-translate","last_synced_at":"2026-04-20T10:05:01.375Z","repository":{"id":57344769,"uuid":"141474932","full_name":"kwhitaker/react-simple-translate","owner":"kwhitaker","description":"A straightforward translation component to be used with React.","archived":false,"fork":false,"pushed_at":"2018-07-28T18:23:51.000Z","size":177,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2023-07-04T02:11:02.057Z","etag":null,"topics":["i18n","localization","node","reactjs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kwhitaker.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-07-18T18:32:30.000Z","updated_at":"2018-07-31T17:10:44.000Z","dependencies_parsed_at":"2022-09-11T15:02:46.878Z","dependency_job_id":null,"html_url":"https://github.com/kwhitaker/react-simple-translate","commit_stats":null,"previous_names":[],"tags_count":0,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kwhitaker%2Freact-simple-translate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kwhitaker%2Freact-simple-translate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kwhitaker%2Freact-simple-translate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kwhitaker%2Freact-simple-translate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kwhitaker","download_url":"https://codeload.github.com/kwhitaker/react-simple-translate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246998216,"owners_count":20866696,"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","localization","node","reactjs"],"created_at":"2024-10-28T23:08:11.503Z","updated_at":"2026-04-20T10:05:01.327Z","avatar_url":"https://github.com/kwhitaker.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.com/kwhitaker/react-simple-translate.svg?branch=master)](https://travis-ci.com/kwhitaker/react-simple-translate)\n\n# React Simple Translate\n\nAn easy to use translation component. Given a translator (which shares the shape of [counterpart](https://github.com/martinandert/counterpart/)), and a set of translations, it will handle locale swapping and string interpolation.\n\n## Installation\n```bash\n$ npm install react-simple-translate\n# or\n$ yarn add react-simple translate\n```\n\n## Usage\n\n```javascript\nimport Translate, { TranslatorContext } from \"react-simple-translate\";\nimport someTranslator from \"some-translator-lib\";\n\nsomeTranslator.registerTranslations(\"en\", {\n  test: { greeting: \"Hello, %(name)s\" }\n});\nsomeTranslator.registerTranslations(\"de\", {\n  test: { greeting: \"Guten Tag, %(name)s\" }\n});\nsomeTranslator.setLocale(\"en\");\n\nconst Greeting = props =\u003e (\n  \u003cp\u003e\n    \u003cTranslate with={props.values}\u003etest.greeting\u003c/Translate\u003e\n  \u003c/p\u003e\n);\n\nclass TranslatedComponent extends React.Component {\n  state = {\n    values: name: \"Bob\"\n  }\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cTranslatorContext.Provider value={someTranslator}\u003e\n          \u003cGreeting values={this.state.values} /\u003e\n        \u003c/TranslatorContext.Provider\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\n// Returns \u003cdiv\u003e\u003cp\u003eHello, Bob\u003c/p\u003e\u003c/div\u003e\nreturn \u003cTranslatedComponent /\u003e;\n\nsomeTranslator.setLocale(\"de\");\n\n// Returns \u003cdiv\u003e\u003cp\u003eGuten Tag, Bob\u003c/p\u003e\u003c/div\u003e\nreturn \u003cTranslatedComponent /\u003e;\n```\n\nYou can also pass a translator directly to `\u003cTranslate /\u003e` if you don't want to use context:\n\n```javascript\nimport { Translate } from \"react-simple-translate/translate\"; //Imports the component without the context wrapper\nimport someTranslator from \"some-translator-lib\";\n\nconst elem = \u003cTranslate with={someObj} translator={someTranslator} /\u003e;\n```\n\n## Optional Dependencies\n\nWhile this component was developed with [counterpart](https://github.com/martinandert/counterpart/) in mind it is optional; you can pass whatever translator you need into it, so long as it matches the expected shape.\n\n## API\n\n### `\u003cTranslate with={Object}\u003e{children}\u003c/Translate\u003e`\n\nGiven a string with keys, replace those keys with values from the current `counterpart` locale.\n\n#### Arguments\n\n- **with: Object**: An object of key/value pairs where the keys match the specified keys in **children**. Values must be of type `React.ReactChild`.\n- **children: String | String[]**: A dot notation or array path corresponding to the locale string to be translated.\n- **count?: Number**: An optional parameter for handling pluralization.\n- **translator: Object**: a translator, matching the shape of `ITranslator`. By default, you should use the context, but you can pass it in as a prop if you need to.\n\n---\n\n### `\u003cInterpolate with={Object}\u003e{children}\u003c/Interpolate\u003e`\n\nGiven a string with keys, replace those keys with values from a provided object.\n\n#### Arguments\n\n- **with: Object**: An object of key value pairs where the keys match the specified keys in **children**. Values must be of type `React.ReactChild`.\n- **children**: The string to be interpolated. Keys to replace _must_ be surrouned with `%()s` (i.e. `%(name)s`).\n- **count?: Number**: An optional parameter for handling pluralization.\n\n#### Usage\n\n```javascript\nimport { Interpolate } from \"react-simple-translate\";\nconst values = {\n  name: \"Bob\"\n};\n\n// Returns \u003c\u003eHello, Bob\u003c/\u003e\nreturn \u003cInterpolate with={values}\u003eHello, %(name)s\u003c/Interpolate\u003e;\n```\n\n---\n\n## Pluralization with Counterpart\n\nBecause of a [bug in counterpart](https://github.com/martinandert/counterpart/issues/12), using\npluralization with locales other than the default requires a work-around. To help with this, I've\nprovided a `localeDefaults` export to be used when registering translations with counterpart.\n\n```javascript\nimport * as counterpart from \"counterpart\";\nimport { localeDefaults } from \"react-simple-translate\";\n\nconst somethingOtherThanDefault = require(\"./de.json\");\ncounterpart.registerTranslations(\"de\", {\n  ...somethingOtherThanDefault,\n  ...localeDefaults\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkwhitaker%2Freact-simple-translate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkwhitaker%2Freact-simple-translate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkwhitaker%2Freact-simple-translate/lists"}