An alternative to React's LinkedStateMixin
npm install react-value-link
npm install --save react-value-link
...then require it (assumes a frontend module bundler)
js
var ValueLink = require('react-value-link');
`Or directly include on the page
html
`$3
#### ValueLink(data, onDataChange)
Returns a link associated to ###### Arguments
- object whose constituent values will be binded to elements
onDataChange - callback called when values change or when requestChange() is called explicity. It receives the changed data as first argument.
onDataChange is where you would usually update the store, trigger an action or mutate the component's state#### link
A functor used to create bindings or futher nested links.
Every link has an associated path. The link returned by
ValueLink has an empty path and directly points to dataA link is like
and similarly can be passed in the valueLink prop to React elements to "bind" them with data at the associated path
`jsx
`#### link(p1, [p2, [p3, [...]]])
Extends the path from
with p1, p2, p3, ... in that order and returns another link based of the extended path###### Arguments
p1, p2, p3, ... - string or integer property names This is used to create nested links
`js
contactLink = link('contact');
...
nameLink = contactLink('name');
`#### link.value
Is the value within
at this link's path or null if there are missing objects in the path#### link.requestChange(newValue)
Sets
newValue at this link's path within data and calls onDataChange.
Any missing objects in the path are automatically created if necessary#### link.onChange
Since React 15 deprecated ReactLink,
components no longer support the valueLink prop. You can still use this library with React 15 by passing the value and onChange props seperately `jsx
`#### link.handleChange
A hook to intercept a
call on this link. This is good for validating, transforming or invoking a related action.link.handleChange must be assigned a function accepting two arguments.
`js
link.handleChange = function(newValue, change) {
... change(newValue);
};
`###### Arguments
- value passed to requestChange()
change - a function to set newValue or any other substitute in data and then invoke the onDataChange callback. You may decide to not call change at all in which case no changes are made to data and onDataChange is not invoked.
$3
`js
var Hello = React.createClass({
// unlike LinkedStateMixin, ValueLink is not a mixin
getInitialState: function() {
return {
values: {
list: [
{ type: "translateX", x: 10 },
{ type: "scaleX", x: 1.2 }
]
}
};
},
render: function() {
var that = this; var link = ValueLink(this.state.values, function(values) { that.setState({values: values}) } );
// a partial valueLink binding which can be sent (as props) to child components that understand only a sub portion of the data structure
var partial = link('list');
return (
{
this.state.values.list.map(function(item, i) {
return (
);
})
}
{JSON.stringify(this.state)}
);
}
});React.render(
`#### License - WTFPL
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004 Copyright (C) 2015 WebEngage
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
0. You just DO WHAT THE FUCK YOU WANT TO.