react-native-translator v1.2.0

React Native Translator

Preview

Introduce

Unofficial free translate component & hook

Never need api key, This library is Unlimited free

Support translators

• Google
• Papago
• Kakao

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 {TranslatorProvider} from 'react-native-translator' // here

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

API

Translator ( Real-time translate )

// Usage
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>
  );
};

useTranslator

// Usage
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>
  );
};

translate

// const {translate} = useTranslator();
type translate: <T extends TranslatorType>(/* check follow param table */) => Promise<string>;

languageCodeConverter

❗️ If conversion is not possible, return undefined.

import {languageCodeConverter} from 'react-native-translator';
// google language code convert to kakao language code
languageCodeConverter('google', 'kakao', 'ko'); // kr

TranslatorType

type TranslatorType = 'google' | 'kakao' | 'papago';

LanguageCode

type LanguageCode<T extends TranslatorType> ...
// Usage
type GoogleLanguageCode = LanguageCode<'google'>;

VALUES

import {LANGUAGE_CODES, TRANSLATOR_TYPES} from 'react-native-translator';
// translator types
TRANSLATOR_TYPES; // ["google", "papago", "kakao", ...]
// language code
LANGUAGE_CODES['google']; // ["af", "ga", "sq", ...]

Support languages