https://github.com/srph/react-link-state
A helper util to use LinkedStateMixin for ES6 React Components
https://github.com/srph/react-link-state
linkedstatemixin react
Last synced: over 1 year ago
JSON representation
A helper util to use LinkedStateMixin for ES6 React Components
- Host: GitHub
- URL: https://github.com/srph/react-link-state
- Owner: srph
- Created: 2015-10-17T05:43:50.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2017-08-15T14:23:32.000Z (almost 9 years ago)
- Last Synced: 2025-03-18T12:04:21.243Z (over 1 year ago)
- Topics: linkedstatemixin, react
- Language: JavaScript
- Homepage:
- Size: 13.7 KB
- Stars: 23
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
## react-link-state [](https://npmjs.org/package/react-link-state?style=flat-square) [](https://travis-ci.org/srph/react-link-state?branch=master)
A helper function to use LinkedStateMixin for ES6 React Components.
## Removal of `valueLink`
`valueLink` has been removed from React starting on `v16`. Still, this projects works just fine for older versions.
If you'd like to future-proof your application, check out [@developit](https://github.com/developit)'s [`linkstate`](https://github.com/developit/linkstate).
## Installing
```bash
npm install react-link-state --save
```
## Usage
```es6
import React from 'react';
import linkState from 'react-link-state';
export default MyForm extends React.Component {
constructor(props) {
super(props);
this.state = {
username: '',
password: '',
toggle: false
};
}
render() {
console.log(this.state);
return (
);
}
}
```
**Note**: Use [`checkedLink`](https://facebook.github.io/react/docs/two-way-binding-helpers.html) for checkboxes.
Deep link-state is also supported!
```es6
// Given that we have this state:
// {
// users: [{
// profile: {
// first_name: ''
// }
// }]
// }
```
## Testing
```
npm test
```
You need node `v4.0.0` to runs the tests. See [issue](http://facebook.github.io/react/docs/test-utils.html#renderintodocument).
> You will need to have window, window.document and window.document.createElement globally available before you import React. Otherwise React will think it can't access the DOM and methods like setState won't work.