uncontrollable-input

Wrapper to easilly create strong controllable/uncontrollable inputs

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
uncontrollable-input
0.1.16 years ago7 years agoMinified + gzip package size for uncontrollable-input in KB

Readme

uncontrollable-input Build Status
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:
you've encountered;
  • fork and create a pull request.

License

ISC © Julien Fontanet