@olenbetong/translation-hook
Hook used to translate text using Google Translation API
Last updated 8 months ago by bjornarvh .
MIT · Original npm · Tarball · package.json
$ cnpm install @olenbetong/translation-hook 
SYNC missed versions from official npm registry.

@olenbetong/translation-hook

Hook that can be used to translate text using Googles translation API.

Installation

NPM:

npm i @olenbetong/translation-hook
import { useTranslation } from '@olenbetong/translation-hook';

IIFE and ESM builds are available on unpkg.com. For IIFE, the components are available in the global ReactTranslationHook variable.

<script src="https://unpkg.com/@olenbetong/translation-hook@latest/dist/iife/translation-hook.min.js" type="text/javascript"></script>
<script type="text/javascript">
const { useTranslation } = ReactTranslationHook;
</script>
<script type="module">
import { useTranslation } from "https://unpkg.com/@olenbetong/translation-hook@latest/dist/esm/translation-hook.min.js";
</script>

Usage

The hook returns an object with these properties:

  • error - Error message if the translation failed
  • from - The language code for the detected language
  • isTranslating - Boolean indicating if the translation has started
  • translation - The translated text (blank if translate hasn't run)
  • translate - Function to trigger the translation

This example component displays a button that triggers the translation if the text hasn't been translated yet:

function getLanguage(code) {
  switch (code) {
  case 'en': return af.common.getLocalizedString('english');
  case 'no': return af.common.getLocalizedString('norwegian');
  case 'pl': return af.common.getLocalizedString('polish');
  case 'ru': return af.common.getLocalizedString('russian');
  default: return code;
  }
}

function Comment(props) {
  const { Comment } = props;
  const uiculture = af.userSession.uiculture.substring(0, 2);

  const {
    error,
    from,
    isTranslating,
    translation,
    translate,
  } = useTranslation(Comment, uiculture, 'some-api-key');

  return <div>
    <p>{Comment}</p>
    {!translation &&
      <button className='btn btn-secondary' onClick={translate} disabled={isTranslating}>
        {isTranslating && <i className='fa fa-spin fa-spinner'/>}
        {af.common.getLocalizedString('Translate')}
      </button>
    }
    {translation && <p>
      {translation}<br/>
      <small className='text-muted'>({af.common.getLocalizedString('Automatically translated from')} {getLanguage(from)})</small>
    </p>}
  </div>
}

Browser compatability

This component is compiled to be used with modern browsers. The last few versions of these browsers are supported:

  • Chrome
  • Firefox
  • Edge
  • Safari

Current Tags

  • 1.0.14                                ...           latest (8 months ago)

13 Versions

  • 1.0.14                                ...           8 months ago
  • 1.0.13                                ...           9 months ago
  • 1.0.12                                ...           a year ago
  • 1.0.11                                ...           a year ago
  • 1.0.10                                ...           a year ago
  • 1.0.9                                ...           a year ago
  • 1.0.8                                ...           a year ago
  • 1.0.7                                ...           2 years ago
  • 1.0.6                                ...           2 years ago
  • 1.0.4                                ...           2 years ago
  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (0)
None
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |