ReactLink-Pipe
Pipeline for ReactLink data binding methods for things like data validation and formatting.
Background on ReactLink
React provides a method, known as ReactLink, to update this.state
on a component whenever the value of an <input>
field changes. This method is exposed by the convenient mixin React.addons.LinkedStateMixin
, which essentially just binds the onChange
event handler to the this.setState()
function of the <input>
field.
Transforms and Pipelines
This module exposes a helper function that provides an easy and convenient way to setup a pipeline of transform functions between getting and setting values in the ReactLink flow.
This let's you do things like automatically format text entered by a user as uppercase, or convert a special class to JSON before trying to display it in your React component.
Usage
Install it with npm install --save reactlink-pipe
.
Exposes function of form: pipeLink(getValTransformFunc, reactLinkObject, setValTransformFunc)
.
Transformation on getting state source
Runs the first transform function over the state source before returning it to React.
var pipeLink = ; { return text && text; } var WithLink = React;
Transformation on setting state source
Runs the second transform function over the React value before returning it to the state source.
var pipeLink = ; { return text && text; } var WithLink = React;
Or put transforms for both getting and setting!
var pipeLink = ; { return something: text }; { return objsomething }; var WithLink = React;
Credits
- Author: David Idol
- License: MIT