Q&A / Use-cases

Multiple simple-keyboard instances: Setting a baseClass

Set the baseClass option to add a different identifier to your simple-keyboard instance. If not set, the second instance will override the first one.

// Keyboard 1
<Keyboard />

// Keyboard 2
<Keyboard
  baseClass={"keyboard2"}
  // If you'd like to keep the default theme
  theme={"simple-keyboard hg-theme-default hg-layout-default"}
/>

Using several inputs

To handle multiple inputs, set the inputName option. For example, if I focus the input called “input1”, the option “inputName” must be set to “input1”. This way, simple-keyboard will know not to overwrite a value meant for another input.

Check out the following sandbox for a full demo:

Having keys in a different language configuration

There’s a number of key layouts available. To apply them, check out simple-keyboard-layouts.

If you’d like to contribute your own layouts, please submit your pull request at the simple-keyboard-layouts repository.

How to syncronize multiple instances of simple-keyboard

You can run multiple instances of simple-keyboard. To keep their internal inputs in sync, set the syncInstanceInputs option to true. If you want to send a command to all your simple-keyboard instances at once, you can use the dispatch method.

Why is the caps lock button working like shift button

For the sake of simplicity, caps lock and shift do the same action in the main demos. If you’d like to show a different layout when you press caps lock, check out the following demo:

How to display a full keyboard

You can display a full keyboard by linking together multiple Simple Keyboard instances. This is because you might want different sections of your keyboard to have different spacing and styling.

Please refer to the documentation on the syncInstanceInputs option, which allows you to sync the input of all your simple-keyboard instances.

Also, check out this demo:

How implement show / hide toggle functionality

To show/hide the keyboard, it is recommended to use CSS classes. Using a conditional instead (such as {keyboardOpen && <Keyboard />})  will destroy the keyboard instance on hide (and therefore the internal input variable).

Here’s an example of keyboard hiding using css classes:

How to validate input

While validation is out of the scope of simple-keyboard, you can easily add your own validation to simple-keyboard callbacks (such as “onChange” and “onKeyPress“.

Check out the following demo for an example:

How to restrict input

Restricting input is quite different to input validation. Input validation often means letting users type normally, then as they finish typing or hit a “submit” button, you tell them if the input is valid or not.

Restricting input however, means that if the user hits a key that doesn’t match a criteria (RegEx), it will be ignored. This is a bit like setting an input element to the “number” type.

Input restriction in react-simple-keyboard

Input restriction in simple-keyboard is accomplished through Regular Expressions (RegEx). For example, if you want to only allow numbers as input (and ignore all other input), you’d use the inputPattern option:

inputPattern={/^\d+$/};

Check out the following demo for an example:

How to group buttons together in the same row

As of react-simple-keyboard 1.20.0, it is possible to group buttons together within the same row. This is useful in cases where you would like to apply a specific styling to a subset of buttons in your row. Like in the following case (notice the positioning of the arrow up and arrow down buttons):

To group buttons together, you simply need to wrap them around square brackets in your layout, like so:

layout={{
    'default': [
      '` [1 2 3 4 5 6 7 8 9] 0 - = {bksp}'
    ]
}}

In this example, buttons 1 to 9 are grouped together in a div container.

To see a more complete example, check out the following demo:

How to avoid unintentional re-rendering

Depending on your implementation, you might want to keep your keyboard component from re-rendering in certain cases.

For example: In the main demo, you’ll find a method called “onChangeInput”. This method is called whenever the input element changes (through the physical keyboard), and has the goal of keeping the input state as well as simple-keyboard’s internal input in sync.

While useful, this call to this.setState makes the whole component re-render, which can cause side effects for properties such as “physicalKeyboardHighlight” (which in this case changes key color on keydown – but when it gets re-rendered, the change gets reverted).

For instances such as this, the solution is to put your keyboard in a “wrapper”. This wrapper is simply a component which has a “shouldComponentUpdate”.

By doing so, we have more control over when our keyboard should re-render.

Check out this demo for an example :

Last Updated:

Do you have a question not covered here?

If you have a specific use-case, or a question regarding implementation, feel free to reach out by:

Response time is quite short, ranging from just a few minutes to less than a day.

Support development of this library: