react-input-auto-tab

React Input Field with Auto tabbing functionality component.

react-input-auto-tab is a module that easily lets you drop it into your existing project and get the benefits of HTML input element with auto tabbing functionality. It's a plug and play component that'll fit in your workflow if your using standalone React or React with Redux.

Usage

npm install --save react-input-auto-tab

import React, { Component } from 'react';
import Autotab from 'react-input-auto-tab';

class InputField extends Component {

  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(response) {
    console.log(response);
  }

  render() {
    return (
      <Autotab
        type="text"
        name="dayOfBirth"
        maxLength={2}
        hint="Enter your day of birth"
        style={{ height: 24, paddingLeft: 10 }}
        onChange={this.handleChange}
        autoFocus
      />
    )
  }
}

export default InputField;

Properties

Name	Type	Default	Description
type	string	text	Specifies the type of input to display such as "password" or "text"
name*	string		Specifies the name of the component
value	string or number		Specifies the value of the component
hint	string		Specifies a short hint that describes the expected value of the component
maxLength	number		Specifies component value length restriction and auto tabbing. The maxLength has to be set for the auto tabbing to work else it will work like a normal HTML input field.
onChange*	function	() => {}	callback function that is fired when component value changes
style	object		Override the inline-styles of the root element
autoFocus	bool	false	Specifies that component should automatically get focus on render

*required properties