rejinr/react-screen-keyboard

react-screen-keyboard

Quick start

Installing via npm

npm install react-screen-keyboard

Example

import React from 'react';
import Keyboard, {KeyboardButton, LatinLayout} from 'react-screen-keyboard';

const MyComponent = ({inputNode, goBack, submit}) =>
  <Keyboard
    inputNode={inputNode}
    leftButtons={[
      <KeyboardButton
        onClick={goBack}
        value="Back"
      />
    ]}
    rightButtons={[
      <KeyboardButton
        onClick={submit}
        value="Submit"
        classes="keyboard-submit-button"
      />
    ]}
    layouts=[LatinLayout]
  />

export default MyComponent;

Props

name	type	default	description
inputNode			It is required to manipulate input field. It must be a value from ref attribute of the Input component, and it can be passed to the Keyboard component using Redux, for example. See below the example of input component
leftButtons	[]	null	Buttons to be rendered on the left from space button
rightButtons	[]	null	Buttons to be rendered on the right from space button
onClick	function	null	Function to be inboked when any button is clicked
isFirstLetterUppercase	boolean	false	is the first letter in the input node should be uppercased
layouts	[]	[CyrillicLayout, LatinLayout]	Layouts. You can use layouts from the package or define your own

Example of input component

import React, {Component, PropTypes} from 'react';

export default class Input extends Component {
  static propTypes = {
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    onChange: PropTypes.func.isRequired,
    onFocus: PropTypes.func,
  };

  static defaultProps = {
    value: '',
    onFocus: null,
  };

  componentDidMount() {
    this.refs.input.addEventListener('input', this.handleChange);
  }

  componentWillUnmount() {
    this.refs.input.removeEventListener('input', this.handleChange);
  }

  handleChange = (event) => this.props.onChange(event.target.value)

  handleFocus = () => {
    if (this.props.onFocus) {
      this.props.onFocus(this.refs.input);
      // the `this.refs.input` value should be passed to the Keyboard component as inputNode prop
    }
  }

  render() {
    const {value} = this.props;

    return (
      <input
        value={value}
        onFocus={this.handleFocus}
        ref="input"
      />
    );
  }
}