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 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 :