import React , { useState } from "react" ; import { languages } from "./languages" ; 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 < Language > ( "hi" ) ; return ( < div className = "container" > < h2 > React transliterate < /h2> < select className = "language-dropdown" value = { lang } onChange = { ( e ) => setLang ( e . target . value as Language ) } > { languages . map ( ( l ) => ( < option key = { l . value } value = { l . value } > { l . label } < /option>))} < /select> < div className = "spacer" / > < label htmlFor = "react-transliterate-input" > Using input < /label> < ReactTransliterate value = { text } onChangeText = { ( text ) => { setText ( text ) ; } } lang = { lang } placeholder = "Start typing here..." id = "react-transliterate-input" / > < div className = "spacer" / > < label htmlFor = "react-transliterate-textarea" > Using textarea < /label> < ReactTransliterate renderComponent = { ( props ) => < textarea { ... props } / > } value = { text } onChangeText = { ( text ) => { setText ( text ) ; } } lang = { lang } placeholder = "Start typing here..." id = "react-transliterate-textarea" / > < div className = "spacer" / > < label htmlFor = "react-transliterate-material-ui-input" > Using Material UI input < /label> < ReactTransliterate renderComponent = { ( props ) => { const inputRef = props . ref ; delete props [ "ref" ] ; return < Input fullWidth { ... props } inputRef = { inputRef } / > ; } } value = { text } onChangeText = { ( text ) => { setText ( text ) ; } } lang = { lang } placeholder = "Start typing here..." id = "react-transliterate-material-ui-input" / > < /div>); } ; export default App ;