2.1.0 • Published 9 years ago

react-freezer-link v2.1.0

Weekly downloads
12
License
MIT
Repository
github
Last release
9 years ago

NPM

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

	...
}
2.1.0

9 years ago

2.0.2

10 years ago

2.0.1

10 years ago

2.0.0

10 years ago

1.3.0

10 years ago

1.2.1

10 years ago

1.2.0

10 years ago

1.1.2

10 years ago

1.1.1

10 years ago

1.1.0

10 years ago