1.4.1 • Published 7 years ago
react-screen-keyboard v1.4.1
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
Example of input component
import React, {Component, PropTypes} from 'react';
import Keyboard, {KeyboardButton} from 'react-screen-keyboard';
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,
}
state = {
inputNode: null,
}
handleInput = (event) => this.props.onChange(event.target.value)
handleFocus = () => {
if (this.props.onFocus) {
this.props.onFocus(this.input);
this.setState({inputNode: this.input});
// the `this.refs.input` value should be passed to the Keyboard component as inputNode prop
}
}
render() {
const {value} = this.props;
const {inputNode} = this.state;
return (
<div>
<input
onInput={this.handleInput}
value={value}
onFocus={this.handleFocus}
ref={(input) => { this.input = input; }}
/>
<Keyboard
inputNode={inputNode}
rightButtons={[
<ClickOnKeyPressWrap key="enter">
<KeyboardButton
onClick={this.handleLoginUser}
value="Войти"
classes="keyboard-submit-button"
/>
</ClickOnKeyPressWrap>
]}
/>
</div>
);
}
}
1.4.1
7 years ago
1.4.0
7 years ago
1.3.10
7 years ago
1.3.9
7 years ago
1.3.8
7 years ago
1.3.7
7 years ago
1.3.6
7 years ago
1.3.5
7 years ago
1.3.4
7 years ago
1.3.3
7 years ago
1.3.2
7 years ago
1.3.1
7 years ago
1.3.0
7 years ago
1.2.2
7 years ago
1.2.1
7 years ago
1.2.0
7 years ago
1.1.0
7 years ago
1.0.22
7 years ago
1.0.21
8 years ago
1.0.20
8 years ago
1.0.19
8 years ago
1.0.18
8 years ago
1.0.17
8 years ago
1.0.16
8 years ago
1.0.15
8 years ago
1.0.14
8 years ago
1.0.13
8 years ago
1.0.12
8 years ago
1.0.11
8 years ago
1.0.10
8 years ago
1.0.9
8 years ago
1.0.8
8 years ago
1.0.7
8 years ago
1.0.6
8 years ago
1.0.5
8 years ago
1.0.4
8 years ago
1.0.3
8 years ago
1.0.2
8 years ago
1.0.1
8 years ago
1.0.0
8 years ago