README
@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