OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How Change language in react-simple-keyboard

  • Thread starter Thread starter Ram Kumar
  • Start date Start date
R

Ram Kumar

Guest
Code:
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')

<pre><code>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;
</code></pre>
<p>Above code shows a deafault english key board. How to change another language in keyboard layout ?</p>
<p>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:</p>
<p>Cannot read properties of undefined (reading 'forEach')
TypeError: Cannot read properties of undefined (reading 'forEach')</p>
 
Top