ansont / 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.

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
	};

	...
}