React Native Translator

npm version License MIT PRs Welcome Example Stars

Preview

Introduce

Free translate component & hook

Never need api key, This library is Unlimited free

Support translators

Getting started

First, Install package

yarn add react-native-translator react-native-webview

Second, Pod intsall

cd ios && pod install

Third, Add provider

// App.js
import React from 'react';
import {View} from 'react-native';
import {TranslatorProvider} from 'react-native-translator' // here

const App = () => {
  return (
    <TranslatorProvider> // here
        <.../>
    </TranslatorProvider> // here
  );
};

Usage

Use Component (real time)

import React, {useState} from 'react';
import {Text, View, TextInput} from 'react-native';
import Translator from 'react-native-translator';

const App = () => {
  const [value, setValue] = useState('');
  const [result, setResult] = useState('');

  return (
    <View>
      <Translator
        from="en"
        to="fr"
        value={value}
        onTranslated={(t) => setResult(t)}
      />
      <TextInput value={value} onChangeText={(t) => setValue(t)} />
      <Text>{result}</Text>
    </View>
  );
};

Use Hook (event)

import React, {useState} from 'react';
import {Text, View, TextInput, Button} from 'react-native';
import {useTranslator} from 'react-native-translator';

const App = () => {
  const {translate} = useTranslator();

  const [value, setValue] = useState('');
  const [result, setResult] = useState('');

  const onTranslate = async () => {
    const _result = await translate('en', 'fr', value);
    setResult(_result);
  };

  return (
    <View>
      <TextInput value={value} onChangeText={(t) => setValue(t)} />
      <Text>{result}</Text>
      <Button title="translate" onPress={onTranslate} />
    </View>
  );
};

API

// Component
interface TranslatorProps<T extends TranslatorType = 'google'> {
  from: LanguageCode<T>;
  to: LanguageCode<T>;
  value: string;
  type?: T; // default 'google'
  onTranslated: (t: string) => void;
}
// Hook
type translate: <T extends TranslatorType = 'google'>(
  from: LanguageCode<T>,
  to: LanguageCode<T>,
  value: string,
  option?: {
    type?: T; // default 'google'
    timeout?: number; // default 5000
  },
) => Promise<string>;
// etc
type TranslatorType = 'google' | 'kakao' | 'papago' | ...
type LanguageCode<T extends TranslatorType> = 'af' | 'ga' | 'sq' | ...

—

Support languages

// You can use like that
import {
  LANGUAGE_CODES,
  TRANSLATOR_TYPES,
  languageCodeConverter,
} from 'react-native-translator';
// translator types
TRANSLATOR_TYPES = ["google", "papago", "kakao", ...]
// language code
const googleLanguageCodes = LANGUAGE_CODES['google']; // ["af", "ga", "sq", ...]
// convert code
const convertedCode = languageCodeConverter('google', 'papago', 'ko');
// code -> 'kr' // if can not convertable return undifined
Language Google Papago Kakao
Afrikaans af
Irish ga
Albanian sq
Italian it it it
Arabic ar ar
Japanese ja ja jp
Azerbaijani az
Kannada kn
Basque eu
Korean ko ko kr
Bengali bn bn
Latin la
Belarusian be
Latvian lv
Bulgarian bg
Lithuanian lt
Catalan ca
Macedonian mk
Chinese Simplified zh-CN zh-CN cn
Malay ms
Chinese Traditional zh-TW zh-TW cn
Maltese mt
Croatian hr
Norwegian no
Czech cs
Persian fa
Danish da
Polish pl
Dutch nl nl
Portuguese pt pt
English en en en
Romanian ro
Esperanto eo
Russian ru ru ru
Estonian et
Serbian sr
Filipino tl
Slovak sk
Finnish fi
Slovenian sl
French fr fr fr
Spanish es es es
Galician gl
Swahili sw
Georgian ka
Swedish sv
German de de de
Tamil ta
Greek el
Telugu te
Gujarati gu
Thai th th th
Haitian Creole ht
Turkish tr tr
Hebrew iw
Ukrainian uk
Hindi hi hi
Urdu ur
Hungarian hu
Vietnamese vi vi vi
Icelandic is
Welsh cy
Indonesian id id id
Yiddish yi

GitHub

View Github