https://github.com/teamgantt/react-auto-translate
Simple React components to automatically translate strings with Google Translate API.
https://github.com/teamgantt/react-auto-translate
hacktoberfest i18n react react-native translation
Last synced: 12 months ago
JSON representation
Simple React components to automatically translate strings with Google Translate API.
- Host: GitHub
- URL: https://github.com/teamgantt/react-auto-translate
- Owner: teamgantt
- License: mit
- Created: 2019-08-19T16:43:28.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-07-10T23:34:39.000Z (almost 3 years ago)
- Last Synced: 2025-07-02T19:18:52.248Z (12 months ago)
- Topics: hacktoberfest, i18n, react, react-native, translation
- Language: TypeScript
- Homepage:
- Size: 3.35 MB
- Stars: 33
- Watchers: 4
- Forks: 11
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Auto Translate
> A simple React component to automatically translate strings with Google Translate API.
## Installation
```
npm install -S react-auto-translate
yarn add react-auto-translate
```
## Usage
React Auto Translate uses React Context API to pass the translation handler around. Wrap your top component with the `` component.
```jsx
// App.js
import {Translator, Translate} from 'react-auto-translate';
return (
Welcome!
...
);
```
## API
### `` ###
- `cacheProvider`: optional handler to cache the translated strings.
- `to`: Language to translate to. [See full list here](https://cloud.google.com/translate/docs/languages).
- `from`: Language text is provided in. Defaults to `en`.
- `googleApiKey`: required [Google Cloud Api Key](https://cloud.google.com/docs/authentication/api-keys) to use for translating.
### `CacheProvider`
- Fully customizable handler to store the translated text. You can also use this to override and initialize the translations for your app.
- If not provided, it will ping Google for the translation every time the component is rendered.
- Must be an object that conforms to the following type.
```ts
type CacheProvider = {
get: (language: string, key: string) => string | undefined;
set: (language: string, key: string, translation: string) => void;
};
// example provider
const cacheProvider = {
get: (language, key) =>
((JSON.parse(localStorage.getItem('translations')) || {})[key] || {})[
language
],
set: (language, key, value) => {
const existing = JSON.parse(localStorage.getItem('translations')) || {
[key]: {},
};
existing[key] = {...existing[key], [language]: value};
localStorage.setItem('translations', JSON.stringify(existing));
},
};
```
### ``
- Simple component to wrap plain text strings.
## TODO
- [ ] Tests
- [ ] CI Tests/Linting
- [ ] Contribution / development instructions