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')
Documentation is your friend, see the layout option documentation for details.
The basic gist is that the layout
prop takes an object with keys "default"
and "shift"
, and the layoutName
specifies which of the layout
properties to use, the defaults being an English keyboard for layout
and "default"
as the layoutName
.
You manually define your layout in the other languages you want.
Example Greek:
const greekLayout = {
default: [
"` 1 2 3 4 5 6 7 8 9 0 - = {bksp}",
"{tab} ; ς ε ρ τ υ θ ι ο π [ ] \\",
"{lock} α σ δ φ γ η ξ κ λ ΄ ' {enter}",
"{shift} < ζ χ ψ ω β ν μ , . / {shift}",
".com @ {space}",
],
shift: [
"~ ! @ # $ % ^ & * ( ) _ + {bksp}",
"{tab} : ΅ Ε Ρ Τ Υ Θ Ι Ο Π { } |",
'{lock} Α Σ Δ Φ Γ Η Ξ Κ Λ ¨ " {enter}',
"{shift} > Ζ Χ Ψ Ω Β Ν Μ < > ? {shift}",
".com @ {space}",
],
}
<Keyboard
layout={greekLayout}
layoutName={layout}
onChange={onChange}
onKeyPress={onKeyPress}
/>
In fact, the layout
doc page I linked includes a link to a companion library that has already defined a bunch of layouts in various languages.