Allow custom component to be displayed in place of layout's entries

This issue has been tracked since 2022-06-06.

As of now, we are only able to add a string instead of a layout entry:

import ReactSimpleKeyboard from 'react-simple-keyboard';

class Keyboard extends Component {
  getLayout = () => {
    return {
      default: [
        "` 1 2 3 4 5 6 7 8 9 0 - = {bksp}",
        "{tab} q w e r t y u i o p [ ] \\",
        "{lock} a s d f g h j k l ; ' {enter}",
        "{shift} z x c v b n m , . / {shift}",
        ".com @ {space}"
      ],
      shift: [
        "~ ! @ # $ % ^ & * ( ) _ + {bksp}",
        "{tab} Q W E R T Y U I O P { } |",
        '{lock} A S D F G H J K L : " {enter}',
        "{shift} Z X C V B N M < > ? {shift}",
        ".com @ {space}"
      ]
    };
  };

  getDisplay = () => {
    return {
      "{bksp}": "backspace",
      "{enter}": "< enter"
    };
  };

  render() {
    return <ReactSimpleKeyboard display={this.getDisplay()} layout={this.getLayout()} />
  }
}

I'd like to be able to display HTML components instead of strings of text:

import ReactSimpleKeyboard from 'react-simple-keyboard';

class Keyboard extends Component {
  getLayout = () => {
    return {
      default: [
        "` 1 2 3 4 5 6 7 8 9 0 - = {bksp}",
        "{tab} q w e r t y u i o p [ ] \\",
        "{lock} a s d f g h j k l ; ' {enter}",
        "{shift} z x c v b n m , . / {shift}",
        ".com @ {space}"
      ],
      shift: [
        "~ ! @ # $ % ^ &amp; * ( ) _ + {bksp}",
        "{tab} Q W E R T Y U I O P { } |",
        '{lock} A S D F G H J K L : " {enter}',
        "{shift} Z X C V B N M &lt; &gt; ? {shift}",
        ".com @ {space}"
      ]
    };
  };

  getDisplay = () => {
    return {
      "{bksp}": <MyBackspaceComponent/>,
      "{enter}": <MyEnterComponent/>
    };
  };

  render() {
    return <ReactSimpleKeyboard display={this.getDisplay()} layout={this.getLayout()} />
  }
}
hodgef wrote this answer on 2022-07-02

Hello @dperera-innerspec,

This is not possible, since the core library is in vanilla JS, and the display values are applied with innerHTML.
#433 (comment)

Regards,
Francisco Hodge

More Details About Repo
Owner Name hodgef
Repo Name simple-keyboard
Full Name hodgef/simple-keyboard
Language JavaScript
Created Date 2018-03-02
Updated Date 2022-12-06
Star Count 1738
Watcher Count 20
Fork Count 130
Issue Count 0

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date