Inputs that behave properly with async set{State,Props} calls
Switch branches/tags
Nothing to show
Clone or download
grncdr Merge pull request #3 from drd/master
Update asyncInput to work with modern React
Latest commit 6b87e5c Mar 10, 2015
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md
index.js
package.json

README.md

react-async-input

Wrap React inputs so that asynchrous updates don't cause the cursor to jump around.

Warning! Old and unmaintained!

I haven't been keeping up with React/maintaining anything that uses it, so this library is compatible with React 0.9.x. It may or may not work with new versions of React. If you use React and this library, send a PR and I will grant you ownership of the package on npm.

Synopsis

var DOM = require('react').DOM
var asyncInput = require('react-async-input')

var input = asyncInput(DOM.input)

// Or monkey-patch React.DOM, don't do this in a library!
// asyncInput.monkeyPatch(DOM)

react.createClass({
  getInitialState: function () {
    this.setState({name: 'Jerry! Sizzlah!'})
  },

  render: function () {
    return DOM.div(null, [
      DOM.label(null, 'Name:'),
      input({
        type: 'number',
        value: this.state.name,
        onChange: this.handleNameChange
      })
    ])
  },

  // this asynchronous event handler no longer causes the cursor to jump around
  handleNameChange: function (event) {
    process.nextTick(function () {
      this.setState({name: event.target.value})
    }.bind(this))
  }
})

Acknowledgements

I copied this technique from swannodette/om after dnolen told me about it. All credit to him for solving a problem I didn't know I was going to have before I even had it.

License

Licensed under the EPL (same as Om)