https://github.com/pawarvijay/react-chopper
Two way binding in reactjs made possible with javascript proxies
https://github.com/pawarvijay/react-chopper
react react-form react-native react-validate reactjs redux-form twoway-data-binding unidirectional-data-flow
Last synced: 8 months ago
JSON representation
Two way binding in reactjs made possible with javascript proxies
- Host: GitHub
- URL: https://github.com/pawarvijay/react-chopper
- Owner: pawarvijay
- License: mit
- Created: 2018-04-15T08:08:39.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T01:18:09.000Z (about 3 years ago)
- Last Synced: 2025-04-10T01:04:16.715Z (8 months ago)
- Topics: react, react-form, react-native, react-validate, reactjs, redux-form, twoway-data-binding, unidirectional-data-flow
- Language: JavaScript
- Homepage:
- Size: 808 KB
- Stars: 8
- Watchers: 4
- Forks: 3
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
react-chopper
Create Datamodels in react
Code without setState
No need to remember this.setState()
No need to manage state in redux(use only for global data like global user info , global ui loader)
No need to use other libraries for state management
Unidirectional Flow under the hood
Use reactjs almost like angular
[](https://circleci.com/gh/pawarvijay/react-chopper/tree/master)
[](https://coveralls.io/github/pawarvijay/react-chopper?branch=master)
## [Example Live](https://stackblitz.com/edit/simple-react-chopper) , [Complex example](https://stackblitz.com/edit/complex-react-chopper), [Super complex example](https://stackblitz.com/edit/super-complex-react-chopper)
Below code does not contains ```this.setState```
```jsx
import React, { Component } from 'react';
import { render } from 'react-dom';
import ReactChopper from 'react-chopper';
class App extends Component {
constructor(props) {
super(props);
this.state = {
name: 'React'
};
this.modal = ReactChopper(this.state, this);
}
render() {
return (
this.modal.name = e.target.value} />
Bang Bang {this.modal.name}
);
}
}
render(, document.getElementById('root'));
//Note : after using this.modal you should not use this.state
```
### [Medium Article - two way binding in reactjs](https://medium.com/@vijay777pawar/two-way-binding-in-reactjs-made-possible-react-chopper-900b8f737a24)
## Aim
Not to develop insecurity by making it higherorder component and wrapping whole react component like other libraries.
Make every develop know whats under the hood its Javascript Proxies.
It will be doing one task only , is to watch any changes on target object and do setState underthehood.
This lib won't be doing multiple task like other react libs do
Eg : redux-form , react-form , react-validation ect .. developers pickup these libs for validation and land up doing state management , which is filled up with its limitations and ultimately creating spagetti code.
## TODO
- [x] Write initial testcases
- [x] Integrate with `circleci`
- [x] Add coveralls support
- [x] A Simple demo sandbox app made from `react-chopper`
- [x] A Complex computation demo sandbox app made from `react-chopper`
- [x] A Super complex computation demo sandbox app made from `react-chopper`
- [x] Documentation about
- [x] Testcase that uses `react-chopper` lib from npm
- [ ] Write some more Complex testcase scenarios for testing
- [ ] Use `rollupjs` instead of `webpack`
- [ ] Create seperate `develop` for all developer experiments
- [ ] Setup mechanism to push tested code to `master branch`
- [ ] Deploy package on npm from `circleci` from `master branch`
- [ ] Add debug mode for debuging , watch changes purpose