{"id":23671625,"url":"https://github.com/teamgantt/react-auto-translate","last_synced_at":"2025-07-19T23:35:46.586Z","repository":{"id":35142993,"uuid":"203212130","full_name":"teamgantt/react-auto-translate","owner":"teamgantt","description":"Simple React components to automatically translate strings with Google Translate API.","archived":false,"fork":false,"pushed_at":"2023-07-10T23:34:39.000Z","size":3515,"stargazers_count":33,"open_issues_count":8,"forks_count":11,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-07-02T19:18:52.248Z","etag":null,"topics":["hacktoberfest","i18n","react","react-native","translation"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/teamgantt.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2019-08-19T16:43:28.000Z","updated_at":"2025-06-16T11:52:42.000Z","dependencies_parsed_at":"2024-06-18T22:41:46.855Z","dependency_job_id":"b19e20c8-b88b-4414-8d23-a5eae546727c","html_url":"https://github.com/teamgantt/react-auto-translate","commit_stats":{"total_commits":56,"total_committers":5,"mean_commits":11.2,"dds":0.2321428571428571,"last_synced_commit":"e73395682f35d5a46cc5558c5427810eae3754fb"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/teamgantt/react-auto-translate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teamgantt%2Freact-auto-translate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teamgantt%2Freact-auto-translate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teamgantt%2Freact-auto-translate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teamgantt%2Freact-auto-translate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/teamgantt","download_url":"https://codeload.github.com/teamgantt/react-auto-translate/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teamgantt%2Freact-auto-translate/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266041937,"owners_count":23867959,"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":["hacktoberfest","i18n","react","react-native","translation"],"created_at":"2024-12-29T10:19:13.719Z","updated_at":"2025-07-19T23:35:46.531Z","avatar_url":"https://github.com/teamgantt.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![](https://img.shields.io/npm/v/react-auto-translate)\n# React Auto Translate\n\u003e A simple React component to automatically translate strings with Google Translate API.\n\n## Installation\n```\nnpm install -S react-auto-translate\n\nyarn add react-auto-translate\n```\n\n## Usage\nReact Auto Translate uses React Context API to pass the translation handler around. Wrap your top component with the `\u003cTranslator/\u003e` component.\n\n```jsx\n// App.js\nimport {Translator, Translate} from 'react-auto-translate';\n\nreturn (\n  \u003cTranslator\n      cacheProvider={cacheProvider}\n      from='en'\n      to='es'\n      googleApiKey='API_KEY'\n    \u003e\n\n    \u003ch1\u003e\u003cTranslate\u003eWelcome!\u003c/Translate\u003e\u003c/h1\u003e\n  ...\n  \u003c/Translator\u003e\n);\n```\n\n## API\n### `\u003cTranslator/\u003e` ###\n  - `cacheProvider`: optional handler to cache the translated strings.\n  - `to`: Language to translate to. [See full list here](https://cloud.google.com/translate/docs/languages).\n  - `from`: Language text is provided in. Defaults to `en`.\n  - `googleApiKey`: required [Google Cloud Api Key](https://cloud.google.com/docs/authentication/api-keys) to use for translating.\n\n### `CacheProvider`\n - Fully customizable handler to store the translated text. You can also use this to override and initialize the translations for your app.\n - If not provided, it will ping Google for the translation every time the component is rendered.\n - Must be an object that conforms to the following type.\n ```ts\ntype CacheProvider = {\n  get: (language: string, key: string) =\u003e string | undefined;\n  set: (language: string, key: string, translation: string) =\u003e void;\n};\n\n// example provider\nconst cacheProvider = {\n  get: (language, key) =\u003e\n    ((JSON.parse(localStorage.getItem('translations')) || {})[key] || {})[\n      language\n    ],\n  set: (language, key, value) =\u003e {\n    const existing = JSON.parse(localStorage.getItem('translations')) || {\n      [key]: {},\n    };\n    existing[key] = {...existing[key], [language]: value};\n    localStorage.setItem('translations', JSON.stringify(existing));\n  },\n};\n```\n\n### `\u003cTranslate/\u003e`\n- Simple component to wrap plain text strings.\n\n## TODO\n- [ ] Tests\n- [ ] CI Tests/Linting\n- [ ] Contribution / development instructions\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteamgantt%2Freact-auto-translate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fteamgantt%2Freact-auto-translate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteamgantt%2Freact-auto-translate/lists"}