Pipeline for ReactLink data binding methods for things like data validation and formatting
npm install reactlink-pipeReactLink-Pipe [![Version][npm-image]][npm-url]
================
Pipeline for ReactLink data binding methods for things like data validation and formatting.
React provides a method, known as ReactLink, to update this.state on a component whenever the value of an 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 field.
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.
Install it with npm install --save reactlink-pipe.
Exposes function of form: pipeLink(getValTransformFunc, reactLinkObject, setValTransformFunc).
Runs the first transform function over the state source before returning it to React.
``js
var pipeLink = require('reactlink-pipe');
function caps(text) { return text && text.toUpperCase(); }
var WithLink = React.createClass({
mixins: [LinkedStateMixin],
getInitialState: function() {
return { name: 'foo' };
},
render: function() {
// Will display "FOO" on first render, while this.state.name will still be "foo"
return (
);
}
});
`
Runs the second transform function over the React value before returning it to the state source.
`js
var pipeLink = require('reactlink-pipe');
function caps(text) { return text && text.toUpperCase(); }
var WithLink = React.createClass({
mixins: [LinkedStateMixin],
getInitialState: function() {
return { name: 'foo' };
},
render: function() {
// Will display "foo" on first render, while this.state.name will still be set to "FOO" when changed
return (
);
}
});
`
`js
var pipeLink = require('reactlink-pipe');
function toObj(text) { return { something: text } };
function fromObj(obj) { return obj.something };
var WithLink = React.createClass({
mixins: [LinkedStateMixin],
getInitialState: function() {
return {
name: {
something: 'foo'
}
};
},
render: function() {
return (
);
}
});
``
- Author: David Idol
- License: MIT
[npm-image]: https://img.shields.io/npm/v/reactlink-pipe.svg?style=flat-square
[npm-url]: https://www.npmjs.org/package/reactlink-pipe