uncontrollable-input

Simplify the creation of controlled/uncontrolled React inputs

Features:

fully compatible with React 15 (both stateful and stateless components)
full controlled and uncontrolled modes support
errors in dev mode on incorrect uses (NODE_ENV != 'production')
full getter/setter support
undefined can be used in controlled mode (as long as there is a value prop)

Install

Node & Browserify/Webpack

Installation of the npm package:

> npm install --save uncontrollable-input

Then require the package:

// ES2015
import uncontrollableInput from 'uncontrollable-input'

// ES5
const uncontrollableInput = require('uncontrollable-input').default

Browser

You can directly use the build provided at unpkg.com:

<script src="https://unpkg.com/uncontrollable-input@0/dist/umd.js"></script>

Usage

Create a controlled input and use the decorator:

const MyInput = @uncontrollableInput(({ onChange, value }) =>
  <input
    onChange={this.props.onChange}
    value={this.props.value}
  />
)

You can now use it in either controlled or uncontrolled mode:

// uncontrolled: defaultValue and ref
<MyInput
  defaultValue='foo bar'
  ref={ref => {
    if (ref) {
      console.log(ref.value) // getter/setter
    }
  }}
/>

// controlled:
<MyInput
  onChange={event => {
    this.linkState({ value: event.target.value })
  }}
  value={this.state.value}
/>

Development

# Install dependencies
> npm install

# Run the tests
> npm test

# Continuously compile
> npm run dev

# Continuously run the tests
> npm run dev-test

# Build for production (automatically called by npm install)
> npm run build

Contributions

Contributions are very welcomed, either on the documentation or on the code.

You may:

report any issue you've encountered;
fork and create a pull request.

JsCommunity / uncontrollable-input