Q&A / Use-cases

Multiple simple-keyboard instances: Setting a baseClass

Set the baseClass option to add a unique identifier to each of your simple-keyboard instances. If not set, a random baseClass will be used (e.g.: simplekeyboard_id-qeu5wu to differentiate your instance from others you may spawn).

Using several inputs

Set the inputName option for each input you want to handle with simple-keyboard.

For example:

// Tell simple-keyboard which input is active
setActiveInput = (event) => {
  this.setState({
    inputName: event.target.id
  });
}

// When the inputs are changed
// (retrieves all inputs as an object instead of just the current input's string)
onChangeAll = (input) => {
  this.setState({
    input: input
  }, () => {
    console.log("Inputs changed", input);
  });
}

render(){
  return (
    <div>
      <input id="input1" onFocus={this.setActiveInput} value={this.state.input['input1'] || ""}/>
      <input id="input2" onFocus={this.setActiveInput} value={this.state.input['input2'] || ""}/>

      <Keyboard
        ref={r => this.keyboard = r}
        inputName={this.state.inputName}
        onChangeAll={inputs => this.onChangeAll(inputs)}
        layoutName={this.state.layoutName}
      />
    </div>
  );

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: