UNPKG

redux-language-mymemory

Version:

Redux slice for language translation using the MyMemory API.

172 lines (149 loc) 5.42 kB
# redux-language-mymemory Redux slice for language translation using the MyMemory API. ## Installation ```bash 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;