react-input-with-keyboard
v1.1.8
Published
A simple input component with on-screen keyboard for react application.
Downloads
10
Readme
React Input with Keyboard ⌨️
Preview
Watch Demo Here
Installation
You can install this package with the following command:
yarn add react-input-with-keyboard
or
npm install react-input-with-keyboard
How to use
you can also see this example
Usage
import React, { Component } from "react";
import { TextInput, Textarea } from "react-input-with-keyboard";
import "./App.css";
// don't forget to import css file.
import "react-input-with-keyboard/dist/index.css";
class App extends Component {
constructor(props) {
super(props);
this.state = {
input1Val: "",
input2Val: "",
input3Val: ""
};
}
onChangeTextField = (key, value) => {
this.setState({
[key]: value
});
};
render() {
const { input1Val, input2Val, input3Val } = this.state;
return (
<div className="App">
<TextInput
text={"Input with full keyboard"}
placeholder="Please Scan Your Badge..."
value={input1Val}
containerClassName="inpContainer"
keyboardKeyClassName="keyboardKeyStyles"
onChange={text => this.onChangeTextField("input1Val", text)}
/>
<TextInput
text={"Input with numaric keyboard"}
placeholder="Please Scan Your Badge..."
value={input2Val}
fullKeyboard={false}
type="number"
keyboardKeyContainerClassName="keyContainerClass"
containerClassName="inpContainer"
onChange={text => this.onChangeTextField("input2Val", text)}
/>
<Textarea
text={"Textarea with keyboard"}
value={input3Val}
fullKeyboard={true}
onChange={value => this.onChangeTextField("input3Val", value)}
containerClassName="inpContainer"
/>
</div>
);
}
}
export default App;
Props
| Props | Type | Notes |
| ----------------------------- | ------------ | ------------------------------------------------------------------------- |
| containerClassName | string
| className of the main Input wrapper. |
| text | string
| Heading of Input. |
| textStyles | string
| Heading className |
| error | bool
| for showing error |
| inputClassName | string
| input className |
| placeholder | string
| placeholder of the input |
| value | string
| value of the input |
| size | string
| size of the input, i.e. large
default
and small
|
| onFocus | function
| callback function for onFocus event |
| onBlur | function
| callback function for onBlur event |
| onChange | function
| callback function for onChange event |
| type | string
| type of input, i.e text
number
etc. |
| disabled | bool
| flag for disable the input or not. |
| id | string
| id for the input. |
| fullKeyboard | bool
| flag for allow full keyboard on input or just numaric keyboard |
| hideOnSmallDevice | bool
| if you want to hide keyboard icon on small devices like moble and tablets |
| keyboardIcon | React.node
| icon for the keyboard, which is show on right side of the input |
| keyboardIconColor | string
| color of the keyboard icon |
| iconClassName | string
| className for keyboard icon |
| keyboardKeyClassName | string
| className for the text inside the keyboard's key |
| keyboardKeyContainerClassName | string
| className for the keyboard's key |