React-input-handler NPM

react-input-handler

⚡️ Utility function to handle input changes in React based on React's handling multiple input docs.

Features

Package size is: 1.66KB (0.8KB gzipped!).
Supports all <input />s, <textarea /> and <select /> elements.
Supports <select multiple />.
Supports checkboxes with same name via array notation.
Play well with deep state traversal using lodash's set method.
Multiple bundles: CJS, ESM and UMD.

Installation

yarn add react-input-handler

npm install react-input-handler --save

Usage

Two things needs to be done to use react-input-handler:

Create a bound function (see 2nd line in constructor).
Attach the bound function to onChange events.

Example

import React from 'react'
import ReactInputHandler from 'react-input-handler'

class Form extends React.Component {

  constructor(props) {
    super(props)
    this.handleChange = ReactInputHandler.bind(this)
    this.handleSubmit.bind(this)
  }

  render() {
    return (
      <form>
        <label>Fullname:</label>
        <input type="text" name="user.fullname" onChange={this.handleChange} />
        
        <label>Biography:</label>
        <textarea type="text" name="user.bio" onChange={this.inputHandler} />
        
        <label> Are you a developer?</label>
        <input type="checkbox" name="user.developer" value="yes" onChange={this.inputHandler} />
        
        <button onClick={this.handleSubmit}>Submit</button>
      </form>
    )
  }

  handleSubmit(event) {
    event.preventDefault()
    console.log(this.state)
    // Output: { user: { fullanme: "string", bio: "string", developer: true|false } }
  }

}

Documentation

React-input-handler is a single function which accept two argument: an event and a optional callback function that will be passed to the setState method.

The objective is simple: handle input changes and persist them into the component's state.

Array notation

By default, react-input-handler handles checkbox as boolean value. Sometimes, we may want two or more checkboxes to be handled as an array sharing the same name attribute. To achieve this we have to suffix the name attribute with []. For example:

Before:

  <input type="checkbox" name="one" value="1"   onChange={this.inputHandler} checked />
  <input type="checkbox" name="two" value="2"   onChange={this.inputHandler} />
  <input type="checkbox" name="three" value="3" onChange={this.inputHandler} checked />
  // state: { one: true, two: false, three: true }

After:

  <input type="checkbox" name="numbers[]" value="1" onChange={this.inputHandler} checked />
  <input type="checkbox" name="numbers[]" value="2" onChange={this.inputHandler} />
  <input type="checkbox" name="numbers[]" value="3" onChange={this.inputHandler} checked />
  // state: { numbers: ["1", "3"] }