react-transliterate
v1.1.9TypeScript
Transliterate component for React
0/weekUpdated 3 years agoMITUnpacked: 98.0 KB
Published by burhanuday
npm install react-transliterateReact Transliterate
Transliteration component for React with support for over 30 languages. Uses API from Google Input Tools
Demo
Install
``bash
npm install --save react-transliterate
OR
yarn add react-transliterate
`
Usage
$3
`jsx
import React, { useState } from "react";
import { ReactTransliterate } from "react-transliterate";
import "react-transliterate/dist/index.css";
const App = () => {
const [text, setText] = useState("");
return (
onChangeText={(text) => {
setText(text);
}}
lang="hi"
/>
);
};
export default App;
`
$3
`jsx
import React, { useState } from "react";
import { ReactTransliterate } from "react-transliterate";
import "react-transliterate/dist/index.css";
const App = () => {
const [text, setText] = useState("");
return (
value={text}
onChangeText={(text) => {
setText(text);
}}
lang="hi"
/>
);
};
export default App;
`
$3
`tsx
import React, { useState } from "react";
import { ReactTransliterate, Language } from "react-transliterate";
import "react-transliterate/dist/index.css";
const App = () => {
const [text, setText] = useState("");
const [lang, setLang] = useState
return (
value={text}
onChangeText={(text) => {
setText(text);
}}
lang={lang}
/>
);
};
export default App;
`
$3
`tsx
import React, { useState } from "react";
import { ReactTransliterate, Language } from "react-transliterate";
import "react-transliterate/dist/index.css";
import Input from "@material-ui/core/Input";
const App = () => {
const [text, setText] = useState("");
const [lang, setLang] = useState
return (
const inputRef = props.ref;
delete props["ref"];
return ;
}}
value={text}
onChangeText={(text) => {
setText(text);
}}
lang={lang}
/>
);
};
export default App;
`
$3
Keys which when pressed, input the current selection to the textbox
React Transliterate uses the event.keycode property to detect keys. Here are some predefined keys you can use. Or, you can enter the integer codes for any other key you'd like to use as the trigger
`jsx
import React, { useState } from "react";
import { ReactTransliterate, TriggerKeys } from "react-transliterate";
import "react-transliterate/dist/index.css";
import Input from "@material-ui/core/Input";
const App = () => {
const [text, setText] = useState("");
return (
onChangeText={(text) => {
setText(text);
}}
lang="hi"
triggerKeys={[
TriggerKeys.KEY_RETURN,
TriggerKeys.KEY_ENTER,
TriggerKeys.KEY_SPACE,
TriggerKeys.KEY_TAB,
]}
/>
);
};
export default App;
`
Get transliteration suggestions
`jsx
import { getTransliterateSuggestions } from "react-transliterate";
const data = await getTransliterateSuggestions(
word, // word to fetch suggestions for
{
numOptions: 5, // number of suggestions to fetch
showCurrentWordAsLastSuggestion: true, // add the word as the last suggestion
lang: "hi", // target language
},
);
`
For a full example, take a look at the example folder
$3
| Prop | Required? | Default | Description |
| -------------------------------- | --------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| onChangeText | Yes | | Listener for the current value from the component. (text: string) => void |value
| value | Yes | | prop to pass to the component |(props) =>
| enabled | | true | Control whether suggestions should be shown |
| renderComponent | | | Component to render. You can pass components from your component library as this prop |
| lang | | hi | Language you want to transliterate. See the following section for language codes |
| maxOptions | | 5 | Maximum number of suggestions to show in helper |
| offsetY | | 0 | Extra space between the top of the helper and bottom of the caret |
| offsetX | | 0 | Extra space between the caret and left of the helper |
| containerClassName | | empty string | Classname passed to the container of the component |
| containerStyles | | {} | CSS styles object passed to the container |
| activeItemStyles | | {} | CSS styles object passed to the active item
tag |
| hideSuggestionBoxOnMobileDevices | | false | Should the suggestions be visible on mobile devices since keyboards like Gboard and Swiftkey support typing in multiple languages |
| hideSuggestionBoxBreakpoint | | 450 | type: number. To be used when hideSuggestionBoxOnMobileDevices is true. Suggestion box will not be shown below this device width |
| triggerKeys | | KEY_SPACE, KEY_ENTER, KEY_TAB, KEY_RETURN | Keys which when pressed, input the current selection to the textbox |
| insertCurrentSelectionOnBlur | | true | Should the current selection be inserted when blur event occurs |
| showCurrentWordAsLastSuggestion | | true` | Show current input as the last option in the suggestion box |$3
| Language | Code |
| --------------------- | -------- |
| Amharic | am |
| Arabic | ar |
| Bangla | bn |
| Belarusian | be |
| Bulgarian | bg |
| Chinese (Hong Kong) | yue-hant |
| Chinese (Simplified) | zh |
| Chinese (Traditional) | zh-hant |
| French | fr |
| German | de |
| Greek | el |
| Gujarati | gu |
| Hebrew | he |
| Hindi | hi |
| Italian | it |
| Japanese | ja |
| Kannada | kn |
| Malayalam | ml |
| Marathi | mr |
| Nepali | ne |
| Odia | or |
| Persian | fa |
| Portuguese (Brazil) | pt |
| Punjabi | pa |
| Russian | ru |
| Sanskrit | sa |
| Serbian | sr |
| Sinhala | si |
| Spanish | es |
| Tamil | ta |
| Telugu | te |
| Tigrinya | ti |
| Ukrainian | uk |
| Urdu | ur |
| Vietnamese | vi |
License
MIT © burhanuday