redux-language-mymemory

Redux slice for language translation using the MyMemory API.

Installation

npm install redux-language-mymemory

import { configureStore } from '@reduxjs/toolkit';
import { languageReducer } from 'redux-language-mymemory';

export const store = configureStore({
  reducer: {
    language: languageReducer,
  },
});


// ExampleComponent.jsx
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { setLanguage, translateText } from 'redux-language-mymemory';

const LanguageSwitcher = () => {
  const dispatch = useDispatch();
  const { language, translatedText, loading, error } = useSelector((state) => state.language);
  const [text, setText] = React.useState('Hello, welcome to our site!');

  const handleChange = (e) => {
    const selectedLang = e.target.value;
    dispatch(setLanguage(selectedLang));
    dispatch(translateText({ text, targetLang: selectedLang }));
  };

  return (
    <div>
      <textarea value={text} onChange={(e) => setText(e.target.value)} />
      <select value={language} onChange={handleChange}>
        <option value="af">Afrikaans</option>
<option value="ar">Arabic</option>
<option value="az">Azerbaijani</option>
<option value="be">Belarusian</option>
<option value="bg">Bulgarian</option>
<option value="bn">Bengali</option>
<option value="bs">Bosnian</option>
<option value="ca">Catalan</option>
<option value="ceb">Cebuano</option>
<option value="co">Corsican</option>
<option value="cs">Czech</option>
<option value="cy">Welsh</option>
<option value="da">Danish</option>
<option value="de">German</option>
<option value="el">Greek</option>
<option value="en">English</option>
<option value="eo">Esperanto</option>
<option value="es">Spanish</option>
<option value="et">Estonian</option>
<option value="eu">Basque</option>
<option value="fa">Persian</option>
<option value="fi">Finnish</option>
<option value="fr">French</option>
<option value="fy">Frisian</option>
<option value="ga">Irish</option>
<option value="gd">Scottish Gaelic</option>
<option value="gl">Galician</option>
<option value="gu">Gujarati</option>
<option value="ha">Hausa</option>
<option value="haw">Hawaiian</option>
<option value="hi">Hindi</option>
<option value="hmn">Hmong</option>
<option value="hr">Croatian</option>
<option value="ht">Haitian Creole</option>
<option value="hu">Hungarian</option>
<option value="hy">Armenian</option>
<option value="id">Indonesian</option>
<option value="ig">Igbo</option>
<option value="is">Icelandic</option>
<option value="it">Italian</option>
<option value="iw">Hebrew</option>
<option value="ja">Japanese</option>
<option value="jw">Javanese</option>
<option value="ka">Georgian</option>
<option value="kk">Kazakh</option>
<option value="km">Khmer</option>
<option value="kn">Kannada</option>
<option value="ko">Korean</option>
<option value="ku">Kurdish</option>
<option value="ky">Kyrgyz</option>
<option value="la">Latin</option>
<option value="lb">Luxembourgish</option>
<option value="lo">Lao</option>
<option value="lt">Lithuanian</option>
<option value="lv">Latvian</option>
<option value="mg">Malagasy</option>
<option value="mi">Maori</option>
<option value="mk">Macedonian</option>
<option value="ml">Malayalam</option>
<option value="mn">Mongolian</option>
<option value="mr">Marathi</option>
<option value="ms">Malay</option>
<option value="mt">Maltese</option>
<option value="my">Burmese</option>
<option value="ne">Nepali</option>
<option value="nl">Dutch</option>
<option value="no">Norwegian</option>
<option value="ny">Chichewa</option>
<option value="pa">Punjabi</option>
<option value="pl">Polish</option>
<option value="ps">Pashto</option>
<option value="pt">Portuguese</option>
<option value="ro">Romanian</option>
<option value="ru">Russian</option>
<option value="sd">Sindhi</option>
<option value="si">Sinhala</option>
<option value="sk">Slovak</option>
<option value="sl">Slovenian</option>
<option value="sm">Samoan</option>
<option value="sn">Shona</option>
<option value="so">Somali</option>
<option value="sq">Albanian</option>
<option value="sr">Serbian</option>
<option value="st">Sesotho</option>
<option value="su">Sundanese</option>
<option value="sv">Swedish</option>
<option value="sw">Swahili</option>
<option value="ta">Tamil</option>
<option value="te">Telugu</option>
<option value="tg">Tajik</option>
<option value="th">Thai</option>
<option value="tl">Filipino</option>
<option value="tr">Turkish</option>
<option value="uk">Ukrainian</option>
<option value="ur">Urdu</option>
<option value="uz">Uzbek</option>
<option value="vi">Vietnamese</option>
<option value="xh">Xhosa</option>
<option value="yi">Yiddish</option>
<option value="yo">Yoruba</option>
<option value="zh">Chinese</option>
<option value="zu">Zulu</option>

      </select>
      

      {loading && <p>Loading...</p>}
      {error && <p style={{color: 'red'}}>{error}</p>}
      {!loading && !error && <p>Translated: {translatedText}</p>}
    </div>
  );
};

export default LanguageSwitcher;






import React from 'react';
import LanguageSwitcher from './components/LanguageSwitcher';

function App() {
  return (
    <div className="App">
      <LanguageSwitcher />
    </div>
  );
}

export default App;