This modules uses react-simple-keyboard

Sample Code



    class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          keyboardText: '1234'
        }
        this.keyboardRef = false;
        this.handleKeyboardRef = this.handleKeyboardRef.bind(this);
      }
      handleKeyboardEnterKey = () => {
        alert('sdfsdfsdf')
      }
      handleKeyboardRef = () => {

      }

      handleKeyboardInputText = (keyboardText) => {
        this.setState({ keyboardText })
      }

      handleKeyboardRef = (keyboard) => {
        this.keyboardRef = keyboard;
      }
      handleInputChange = (e) => {
        const value = e.target.value
        this.setState({ keyboardText: value }, () => {
          this.keyboardRef.keyboard.setInput(value, 'kiosk')
        })
      }

      render() {
        const { keyboardText } = this.state;
        return (
          
            
            
          
        );
      }
    }

Props

Props	Default	Value	Description
buttonTheme	[]	Array	Refer to: Button Theme
inputName	kiosk	string	name of the current input bind in keyboard
buttonDisplay		object	refer to: Display
layoutName	lowercase	string	Default layouts: lowercase, uppercase, number, specialChar
themeClassName	kiosk-template-keyboard	string	CSS classname
layout	`layouts: { lowercase: [ "q w e r t y u i o p {bksp}", "a s d f g h j k l {enter}", "{caps} z x c v b n m _ {caps}", "{123abc} {space} . @" ], uppercase: [ "Q W E R T Y U I O P {bksp}", "A S D F G H J K L {enter}", "{shift} Z X C V B N M _ {shift}", "{123abc} {space} . @" ], number: [ "1 2 3", "4 5 6", "7 8 9", "{bksp} 0 {enter}", ], specialChar: [ "1 2 3 4 5 6 7 8 9 0 {bksp}", "_ / : ; ( ) $ & \\ {enter}", "- < > ? ! ' \" + # * ,", "{abc} {space} . @" ] }`	object	Refer to: layout
onSubmitKey		function	Action to call when touch the enter key
setInputText		function	params: activeInputText
setKeyboardRef		function	keyboard reference