Skip to content

A React mixin for linking form fields to a deep structure of data within the component's state.

License

Notifications You must be signed in to change notification settings

chriswhelix/react-deep-link-state

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

NPM

react-deep-link-state

A React mixin for linking form fields to a deep structure of data within the component's state.

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 state object.

Getting Started#

To install from npm, run:

npm install --save react-deep-link-state

Then include the mixin in the component that will use it:

var DeepLinkedStateMixin = require('react-deep-link-state');

...

var MyComponent = React.createClass({
	mixins: [DeepLinkedStateMixin],
	
	...
});

Usage Examples

Link a text field to this.state.data.user.name:

<input type="text" valueLink={this.deepLinkState(['data', 'user', 'name'])} />

Link a text field to this.state.data.user.name, translating an empty string in the text field to null in the state and vice-versa:

<input type="text" valueLink={this.deepLinkState(['data', 'user', 'name'], {storeEmptyStringAsNull: true})} />

About

A React mixin for linking form fields to a deep structure of data within the component's state.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%