react-screen-keyboard
Quick start
Installing via npm
npm install react-screen-keyboard
Example
;; const MyComponent = <Keyboard inputNode=inputNode leftButtons= <KeyboardButton onClick=goBack value="Back" /> rightButtons= <KeyboardButton onClick=submit value="Submit" classes="keyboard-submit-button" /> layouts=LatinLayout /> ;
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
;; static propTypes = value: PropTypes onChange: PropTypesfuncisRequired onFocus: PropTypesfunc static defaultProps = value: '' onFocus: null state = inputNode: null thisprops { if thispropsonFocus thisprops; this; // the `this.refs.input` value should be passed to the Keyboard component as inputNode prop } { const value = thisprops; const inputNode = thisstate; return <div> <input onInput=thishandleInput value=value onFocus=thishandleFocus ref= { thisinput = input; } /> <Keyboard inputNode=inputNode rightButtons= <ClickOnKeyPressWrap key="enter"> <KeyboardButton onClick=thishandleLoginUser value="Войти" classes="keyboard-submit-button" /> </ClickOnKeyPressWrap> /> </div> ; }