samad324/react-input-with-keyboard

A React input component with keyboard, see demo on

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