0.0.5 • Published 8 years ago

react-input-auto-tab v0.0.5

Weekly downloads
32
License
MIT
Repository
github
Last release
8 years ago

react-input-auto-tab

React Input Field with Auto tabbing functionality component.

Build Status license

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

NameTypeDefaultDescription
typestringtextSpecifies the type of input to display such as "password" or "text"
name*stringSpecifies the name of the component
valuestring or numberSpecifies the value of the component
hintstringSpecifies a short hint that describes the expected value of the component
maxLengthnumberSpecifies 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
styleobjectOverride the inline-styles of the root element
autoFocusboolfalseSpecifies that component should automatically get focus on render

*required properties

0.0.5

8 years ago

0.0.4

8 years ago

0.0.3

8 years ago

0.0.2

8 years ago

0.0.1

8 years ago