import React, { useRef, useState } from "react";
import Keyboard from "react-simple-keyboard";
import "react-simple-keyboard/build/css/index.css";
function App() {
const [input, setInput] = useState("");
const [layout, setLayout] = useState("default");
const keyboard = useRef();
const onChange = input => {
setInput(input);
console.log("Input changed", input);
};
const handleShift = () => {
const newLayoutName = layout === "default" ? "shift" : "default";
setLayout(newLayoutName);
};
const onKeyPress = button => {
console.log("Button pressed", button);
/**
* If you want to handle the shift and caps lock buttons
*/
if (button === "{shift}" || button === "{lock}") handleShift();
};
const onChangeInput = event => {
const input = event.target.value;
setInput(input);
keyboard.current.setInput(input);
};
return (
<>
<input
value={input}
placeholder={"Tap on the virtual keyboard to start"}
onChange={onChangeInput}
/>
<Keyboard
keyboardRef={r => (keyboard.current = r)}
layoutName={layout}
onChange={onChange}
onKeyPress={onKeyPress}
/>
</>
);
}
export default App;
Above code shows a deafault english key board. How to change another language in keyboard layout ?
Above code shows a deafault english key board. How to change another language in keyboard layout ? Or Suggest any other methods please help ! But I change English show this type of error:
Cannot read properties of undefined (reading 'forEach') TypeError: Cannot read properties of undefined (reading 'forEach')