{"id":13599743,"url":"https://github.com/burhanuday/react-transliterate","last_synced_at":"2025-04-05T12:06:02.662Z","repository":{"id":40414697,"uuid":"296248373","full_name":"burhanuday/react-transliterate","owner":"burhanuday","description":"Transliteration component for React with support for over 30 langauges. Burhanuddin → बुरहानुद्दीन","archived":false,"fork":false,"pushed_at":"2023-10-03T19:00:47.000Z","size":3646,"stargazers_count":193,"open_issues_count":13,"forks_count":38,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-29T11:07:45.416Z","etag":null,"topics":["react","react-component","transliteration-component","works-with-react"],"latest_commit_sha":null,"homepage":"https://burhanuday.github.io/react-transliterate/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/burhanuday.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-09-17T07:13:28.000Z","updated_at":"2025-02-13T15:51:44.000Z","dependencies_parsed_at":"2023-02-07T00:34:02.025Z","dependency_job_id":"0db5bc87-1455-496f-a254-8c53227f7e5e","html_url":"https://github.com/burhanuday/react-transliterate","commit_stats":{"total_commits":99,"total_committers":6,"mean_commits":16.5,"dds":"0.18181818181818177","last_synced_commit":"abaa2d0f2d9fad9bfe75b6ed0d9e6f06c5d2450b"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/burhanuday%2Freact-transliterate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/burhanuday%2Freact-transliterate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/burhanuday%2Freact-transliterate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/burhanuday%2Freact-transliterate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/burhanuday","download_url":"https://codeload.github.com/burhanuday/react-transliterate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247332604,"owners_count":20921853,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-component","transliteration-component","works-with-react"],"created_at":"2024-08-01T17:01:10.522Z","updated_at":"2025-04-05T12:06:02.621Z","avatar_url":"https://github.com/burhanuday.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eReact Transliterate\u003c/h1\u003e\n\nTransliteration component for React with support for over 30 languages. Uses API from [Google Input Tools](https://www.google.com/inputtools)\n\n[![NPM](https://img.shields.io/npm/v/react-transliterate.svg)](https://www.npmjs.com/package/react-transliterate)\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"./assets/hi.gif\"\u003e\u003c/img\u003e\n\u003c/p\u003e\n\n## Demo\n\n[See Demo](https://burhanuday.github.io/react-transliterate/)\n\n## Install\n\n```bash\nnpm install --save react-transliterate\n\nOR\n\nyarn add react-transliterate\n```\n\n## Usage\n\n### Basic example\n\n```jsx\nimport React, { useState } from \"react\";\n\nimport { ReactTransliterate } from \"react-transliterate\";\nimport \"react-transliterate/dist/index.css\";\n\nconst App = () =\u003e {\n  const [text, setText] = useState(\"\");\n\n  return (\n    \u003cReactTransliterate\n      value={text}\n      onChangeText={(text) =\u003e {\n        setText(text);\n      }}\n      lang=\"hi\"\n    /\u003e\n  );\n};\n\nexport default App;\n```\n\n### With custom component\n\n```jsx\nimport React, { useState } from \"react\";\n\nimport { ReactTransliterate } from \"react-transliterate\";\nimport \"react-transliterate/dist/index.css\";\n\nconst App = () =\u003e {\n  const [text, setText] = useState(\"\");\n\n  return (\n    \u003cReactTransliterate\n      renderComponent={(props) =\u003e \u003ctextarea {...props} /\u003e}\n      value={text}\n      onChangeText={(text) =\u003e {\n        setText(text);\n      }}\n      lang=\"hi\"\n    /\u003e\n  );\n};\n\nexport default App;\n```\n\n### Usage with TypeScript\n\n```tsx\nimport React, { useState } from \"react\";\n\nimport { ReactTransliterate, Language } from \"react-transliterate\";\nimport \"react-transliterate/dist/index.css\";\n\nconst App = () =\u003e {\n  const [text, setText] = useState(\"\");\n  const [lang, setLang] = useState\u003cLanguage\u003e(\"hi\");\n\n  return (\n    \u003cReactTransliterate\n      renderComponent={(props) =\u003e \u003ctextarea {...props} /\u003e}\n      value={text}\n      onChangeText={(text) =\u003e {\n        setText(text);\n      }}\n      lang={lang}\n    /\u003e\n  );\n};\n\nexport default App;\n```\n\n### With material ui\n\n```tsx\nimport React, { useState } from \"react\";\n\nimport { ReactTransliterate, Language } from \"react-transliterate\";\nimport \"react-transliterate/dist/index.css\";\n\nimport Input from \"@material-ui/core/Input\";\n\nconst App = () =\u003e {\n  const [text, setText] = useState(\"\");\n  const [lang, setLang] = useState\u003cLanguage\u003e(\"hi\");\n\n  return (\n    \u003cReactTransliterate\n      renderComponent={(props) =\u003e {\n        const inputRef = props.ref;\n        delete props[\"ref\"];\n        return \u003cInput {...props} inputRef={inputRef} /\u003e;\n      }}\n      value={text}\n      onChangeText={(text) =\u003e {\n        setText(text);\n      }}\n      lang={lang}\n    /\u003e\n  );\n};\n\nexport default App;\n```\n\n### Custom trigger keys\n\nKeys which when pressed, input the current selection to the textbox\n\nReact 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\n\n```jsx\nimport React, { useState } from \"react\";\n\nimport { ReactTransliterate, TriggerKeys } from \"react-transliterate\";\nimport \"react-transliterate/dist/index.css\";\n\nimport Input from \"@material-ui/core/Input\";\n\nconst App = () =\u003e {\n  const [text, setText] = useState(\"\");\n\n  return (\n    \u003cReactTransliterate\n      value={text}\n      onChangeText={(text) =\u003e {\n        setText(text);\n      }}\n      lang=\"hi\"\n      triggerKeys={[\n        TriggerKeys.KEY_RETURN,\n        TriggerKeys.KEY_ENTER,\n        TriggerKeys.KEY_SPACE,\n        TriggerKeys.KEY_TAB,\n      ]}\n    /\u003e\n  );\n};\n\nexport default App;\n```\n\n## Get transliteration suggestions\n\n```jsx\nimport { getTransliterateSuggestions } from \"react-transliterate\";\n\nconst data = await getTransliterateSuggestions(\n  word, // word to fetch suggestions for\n  {\n    numOptions: 5, // number of suggestions to fetch\n    showCurrentWordAsLastSuggestion: true, // add the word as the last suggestion\n    lang: \"hi\", // target language\n  },\n);\n```\n\nFor a full example, take a look at the `example` folder\n\n### Props\n\n| Prop                             | Required? | Default                                     | Description                                                                                                                          |\n| -------------------------------- | --------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |\n| onChangeText                     | Yes       |                                             | Listener for the current value from the component. `(text: string) =\u003e void`                                                          |\n| value                            | Yes       |                                             | `value` prop to pass to the component                                                                                                |\n| enabled                          |           | true                                        | Control whether suggestions should be shown                                                                                          |\n| renderComponent                  |           | `(props) =\u003e \u003cinput {...props} /\u003e`           | Component to render. You can pass components from your component library as this prop                                                |\n| lang                             |           | hi                                          | Language you want to transliterate. See the following section for language codes                                                     |\n| maxOptions                       |           | 5                                           | Maximum number of suggestions to show in helper                                                                                      |\n| offsetY                          |           | 0                                           | Extra space between the top of the helper and bottom of the caret                                                                    |\n| offsetX                          |           | 0                                           | Extra space between the caret and left of the helper                                                                                 |\n| containerClassName               |           | empty string                                | Classname passed to the container of the component                                                                                   |\n| containerStyles                  |           | {}                                          | CSS styles object passed to the container                                                                                            |\n| activeItemStyles                 |           | {}                                          | CSS styles object passed to the active item `\u003cli\u003e` tag                                                                               |\n| hideSuggestionBoxOnMobileDevices |           | `false`                                     | Should the suggestions be visible on mobile devices since keyboards like Gboard and Swiftkey support typing in multiple languages    |\n| hideSuggestionBoxBreakpoint      |           | 450                                         | type: `number`. To be used when `hideSuggestionBoxOnMobileDevices` is true. Suggestion box will not be shown below this device width |\n| triggerKeys                      |           | `KEY_SPACE, KEY_ENTER, KEY_TAB, KEY_RETURN` | Keys which when pressed, input the current selection to the textbox                                                                  |\n| insertCurrentSelectionOnBlur     |           | `true`                                      | Should the current selection be inserted when `blur` event occurs                                                                    |\n| showCurrentWordAsLastSuggestion  |           | `true`                                      | Show current input as the last option in the suggestion box                                                                          |\n\n### Supported Languages\n\n| Language              | Code     |\n| --------------------- | -------- |\n| Amharic               | am       |\n| Arabic                | ar       |\n| Bangla                | bn       |\n| Belarusian            | be       |\n| Bulgarian             | bg       |\n| Chinese (Hong Kong)   | yue-hant |\n| Chinese (Simplified)  | zh       |\n| Chinese (Traditional) | zh-hant  |\n| French                | fr       |\n| German                | de       |\n| Greek                 | el       |\n| Gujarati              | gu       |\n| Hebrew                | he       |\n| Hindi                 | hi       |\n| Italian               | it       |\n| Japanese              | ja       |\n| Kannada               | kn       |\n| Malayalam             | ml       |\n| Marathi               | mr       |\n| Nepali                | ne       |\n| Odia                  | or       |\n| Persian               | fa       |\n| Portuguese (Brazil)   | pt       |\n| Punjabi               | pa       |\n| Russian               | ru       |\n| Sanskrit              | sa       |\n| Serbian               | sr       |\n| Sinhala               | si       |\n| Spanish               | es       |\n| Tamil                 | ta       |\n| Telugu                | te       |\n| Tigrinya              | ti       |\n| Ukrainian             | uk       |\n| Urdu                  | ur       |\n| Vietnamese            | vi       |\n\n## License\n\nMIT © [burhanuday](https://github.com/burhanuday)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fburhanuday%2Freact-transliterate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fburhanuday%2Freact-transliterate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fburhanuday%2Freact-transliterate/lists"}