react-freezer-link v2.1.0
react-freezer-link
A React mixin for linking form fields to a deep structure of data within the component's prop which provided by Freezer.
Description
This mixin is a substitute for the standard React mixin React.addons.LinkedStateMixin. While the standard mixin only allows you to link a form field to a key directly within the component's state, this mixin allows you to link a form field to a key deeper in the component's prop object which provided by Freezer.
Getting Started
To install from npm, run:
npm install --save react-freezer-link
Then include the mixin in the component that will use it:
import FreezerLinkMixin from 'react-freezer-link';
...
var MyComponent = React.createClass({
mixins: [FreezerLinkMixin],
...
});
or
import FreezerLinkDecorator from 'react-freezer-link/lib/decorator';
...
@FreezerLinkDecorator
class MyComponent extends React.Component {
...
}
Usage Examples
Link a text field to this.props.data.user.name
:
<input type="text" valueLink={this.linkProp('data.user.name')} />
In React v15 valueLink
is deprecated "due to very low popularity", because of this there are other variant of usage:
<input type="text" {...this.valueLinkToProp('data.user.name')} />
<input type="checkbox" {...this.checkedLinkToProp('data.user.onDiet')} />
Link a text field to this.props.data.user.name
, translating an empty string in the text field to null in the state and vice-versa:
<input type="text" valueLink={this.linkProp('data.user.name', {storeEmptyStringAsNull: true})} />
In both cases above you can add callback:
<input type="text" valueLink={this.linkProp('data.user.name', (newVale) => {...})} />
<input type="text" valueLink={this.linkProp('data.user.name', {storeEmptyStringAsNull: true}, (newVale) => {...})} />
Furthermore you can set context:
items.map(user => (
<input type="text" valueLink={this.linkProp('name', {context: user})} />
))
In options you can set mutator
function:
<input type="text" {...this.valueLinkToProp('data.user.name', {mutator: _ => _.toUpperCase()})} />
Also you can define global configs:
MyComponent.freezerLinkConfig = {
storeEmptyStringAsNull: true
};
// or
class MyComponent extends React.Component {
static freezerLinkConfig = {
storeEmptyStringAsNull: true
};
...
}