Installing via npm
npm install react-screen-keyboard
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;
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"
/>
);
}
}