2.1.0 • Published 4 years ago

react-model-controller

Licence

MIT

Version

2.1.0

Deps

Size

19 kB

Vulns

Weekly

Summary Dependency Versions

React Model

An easy way to implement two-way data binding in React without using mixins. Tired of defining handleChange() functions? Here's solution, react-model-controller.

npm i react-model-controller

Usage:

import ModelController from 'react-model-controller'

constructor (props) {
  ...
  this.models = {
    name: ModelController.create({
      target: this,
      name: 'name'
    })
  }
  ...
}

render () {
  ...
    <input
      value={this.models.name.get()}
      onChange={this.models.name.set()}
    >
  ...
}

<input {...ModelController.link(this, 'name')}>

API

public static ReactModelController.create()

Argument	Type
target	React.Component	A react component, which state should be updated, when input value changes. Most of the time it will be
name	String	A name for state prop to change.
defaultValue	Any	Default value to state.
validate	Function	Function
mask	String	An input mask. Example: "** **"

Returns a new ReactModelController instance.

Changelog

v2.0

Added automating input masking.
Added ReactModelController.create() static method
Added .link public property