Translate Component & Hook Without API For React Native

Unlimited free React Native translate component and hook with no API required. Currently supports Google Translate, Papago, and Kakao.

How to use it:

1. Import and Add the TranslatorProvider to your app.

import React from 'react';
import {View} from 'react-native';
import {TranslatorProvider} from 'react-native-translator'

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

2. Use it as a component.

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="es"
        value={value}
        onTranslated={(t) => setResult(t)}
      />
      <TextInput value={value} onChangeText={(t) => setValue(t)} />
      <Text>{result}</Text>
    </View>
  );
};

3. Use it as a hook.

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', 'es', value);
    setResult(_result);
  };
  return (
    <View>
      <TextInput value={value} onChangeText={(t) => setValue(t)} />
      <Text>{result}</Text>
      <Button title="translate" onPress={onTranslate} />
    </View>
  );
};

4. 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' | ...

Preview:

Download Details:

Author: KoreanThinker

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/KoreanThinker/react-native-translator

License: MIT