Transliteration component for React with support for over 30 languages. Uses API from [Google Input Tools](https://www.google.com/inputtools)
[](https://www.npmjs.com/package/react-transliterate)
## Demo
[See Demo](https://burhanuday.github.io/react-transliterate/)
## Install
```bash
npm install --save react-transliterate
OR
yarn add react-transliterate
```
## Usage
### Basic example
```jsx
import React, { useState } from "react";
import { ReactTransliterate } from "react-transliterate";
import "react-transliterate/dist/index.css";
const App = () => {
const [text, setText] = useState("");
return (
{
setText(text);
}}
lang="hi"
/>
);
};
export default App;
```
### With custom component
```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;
```
### Usage with TypeScript
```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("hi");
return (
}
value={text}
onChangeText={(text) => {
setText(text);
}}
lang={lang}
/>
);
};
export default App;
```
### With material ui
```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("hi");
return (
{
const inputRef = props.ref;
delete props["ref"];
return ;
}}
value={text}
onChangeText={(text) => {
setText(text);
}}
lang={lang}
/>
);
};
export default App;
```
### Custom trigger keys
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 (
{
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
### Props
| Prop | Required? | Default | Description |
| -------------------------------- | --------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| onChangeText | Yes | | Listener for the current value from the component. `(text: string) => void` |
| value | Yes | | `value` prop to pass to the component |
| enabled | | true | Control whether suggestions should be shown |
| renderComponent | | `(props) => ` | 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 `
