react-auto-translate v0.0.6

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 <Translator/> component.

// App.js
import {Translator, Translate} from 'react-auto-translate';

return (
  <Translator
      cacheProvider={cacheProvider}
      from='en'
      to='es'
      googleApiKey='API_KEY'
    >

    <h1><Translate>Welcome!</Translate></h1>
  ...
  </Translator>
);

API

<Translator/>

• cacheProvider: optional handler to cache the translated strings.
• to: Language to translate to. See full list here.
• from: Language text is provided in. Defaults to en.
• googleApiKey: required Google Cloud Api Key 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.

  type CacheProvider = {
   get: (language: string, key: string) => string | undefined;
   set: (language: string, key: string, translation: string) => void;
  };

// example procider 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));

}, };

### `<Translate/>`
- Simple component to wrap plain text strings.

## TODO
- [ ] Tests
- [ ] CI Tests/Linting
- [ ] Contribution / development instructions