CODEWITHSUNDEEP
javascriptreactjsreact-simple-keyboard
Ram Kumar
Ram Kumar

Reputation: 13

How Change language in react-simple-keyboard

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')

Upvotes: 1

Views: 436

Answers (1)

Drew Reese
Drew Reese

Reputation: 203427

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.

Simple-Keyboard-Layouts

Upvotes: 1

Related Questions