How can add React Transliterate in div contentEditable.. Please help me
import './App.css';
import EditText from "./component/EditText"
import Tools from "./component/tools"
import Header from "./component/header"
import Img from "./component/img"
import './scss/style.scss';
import MyImage from './home.png';
import React, { useState } from "react";
import { ReactTransliterate, Language } from "react-transliterate";
const App = () => {
const [text, setText] = useState("");
const [message, setMessage] = useState('');
const handleKeyDown = event => {
console.log(event.key);
if (event.key === 'Enter') {
event.preventDefault();
console.log(message);
console.log(event.target.value)
console.log('User pressed Enter ');
}
};
// const [lang, setLang] = useState<Language>("hi");
return (
<div className="App">
<Header/>
<div className='App_leftbar'>
<ul>
<li>
<a href='#'><img src={MyImage} /></a>
</li>
</ul>
</div>
<div className='App_centerbar'>
<div
contentEditable="true"
id="message"
name="message"
value={text}
onChange={event => setText(event.target.value)}
onKeyDown={handleKeyDown}
/>
<ReactTransliterate
renderComponent={(props) => <EditText onChange={event => setText(event.target.value)}
onKeyDown={handleKeyDown} {...props} />}
value={text}
onChangeText={(text) => {
setText(text);
}}
lang="hi"
placeholder="Start typing here..."
id="react-transliterate-input"
/>
<Img src={MyImage}/>
</div>
<div className='App_rightbar'>
<Tools />
</div>
</div>
);
}
export default App;
I used this npm https://www.npmjs.com/package/react-transliterate?activeTab=readme
import React, { useState } from "react";
import { ReactTransliterate } from "react-transliterate";
import "react-transliterate/dist/index.css";
const App = () => {
const [text, setText] = useState("");
return (
<ReactTransliterate
value={text}
onChangeText={(text) => {
setText(text);
}}
lang="hi"
/>
);
};
export default App;
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