{"id":24936731,"url":"https://github.com/pawarvijay/react-chopper","last_synced_at":"2025-04-10T01:04:26.284Z","repository":{"id":31867414,"uuid":"129589787","full_name":"pawarvijay/react-chopper","owner":"pawarvijay","description":"Two way binding in reactjs made possible with javascript proxies","archived":false,"fork":false,"pushed_at":"2022-12-07T01:18:09.000Z","size":827,"stargazers_count":8,"open_issues_count":7,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-10T01:04:16.715Z","etag":null,"topics":["react","react-form","react-native","react-validate","reactjs","redux-form","twoway-data-binding","unidirectional-data-flow"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pawarvijay.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-04-15T08:08:39.000Z","updated_at":"2024-06-23T13:28:02.000Z","dependencies_parsed_at":"2023-01-14T19:56:44.585Z","dependency_job_id":null,"html_url":"https://github.com/pawarvijay/react-chopper","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pawarvijay%2Freact-chopper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pawarvijay%2Freact-chopper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pawarvijay%2Freact-chopper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pawarvijay%2Freact-chopper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pawarvijay","download_url":"https://codeload.github.com/pawarvijay/react-chopper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248137890,"owners_count":21053775,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-form","react-native","react-validate","reactjs","redux-form","twoway-data-binding","unidirectional-data-flow"],"created_at":"2025-02-02T16:42:43.589Z","updated_at":"2025-04-10T01:04:26.250Z","avatar_url":"https://github.com/pawarvijay.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\nreact-chopper\n\u003cbr\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/pawarvijay/react-chopper/master/helicopter.svg?sanitize=true\" width=\"300\" height=\"200\"/\u003e\n\u003c/h1\u003e\n\n\u003ch3 align=\"center\"\u003eCreate Datamodels in react\u003c/h3\u003e\n\u003ch4 align=\"center\"\u003eCode without setState\u003c/h4\u003e\n\u003ch4 align=\"center\"\u003eNo need to remember this.setState()\u003c/h4\u003e\n\u003ch4 align=\"center\"\u003eNo need to manage state in redux(use only for global data like global user info , global ui loader)\u003c/h4\u003e\n\u003ch4 align=\"center\"\u003eNo need to use other libraries for state management\u003c/h4\u003e\n\u003ch4 align=\"center\"\u003eUnidirectional Flow under the hood\u003c/h4\u003e\n\u003ch4 align=\"center\"\u003eUse reactjs almost like angular\u003c/h4\u003e\n\n[![CircleCI status](https://circleci.com/gh/pawarvijay/react-chopper/tree/master.svg?style=shield\u0026circle-token=:circle-token)](https://circleci.com/gh/pawarvijay/react-chopper/tree/master)\n[![Coverage Status](https://coveralls.io/repos/github/pawarvijay/react-chopper/badge.svg?branch=master\u0026style=flat)](https://coveralls.io/github/pawarvijay/react-chopper?branch=master)\n\n## [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)\n\n Below code does not contains ```this.setState```\n \n```jsx\nimport React, { Component } from 'react';\nimport { render } from 'react-dom';\nimport ReactChopper from 'react-chopper';\n\nclass App extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      name: 'React'\n    };\n    this.modal = ReactChopper(this.state, this);\n  }\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cinput\n          name={this.modal.name}\n          onChange={e =\u003e this.modal.name = e.target.value} /\u003e\n        \u003cp\u003e\n          Bang Bang {this.modal.name}\n        \u003c/p\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nrender(\u003cApp /\u003e, document.getElementById('root'));\n\n//Note : after using this.modal you should not use this.state\n```\n\n### [Medium Article - two way binding in reactjs](https://medium.com/@vijay777pawar/two-way-binding-in-reactjs-made-possible-react-chopper-900b8f737a24)\n\n\n## Aim \n\nNot to develop insecurity by making it higherorder component and wrapping whole react component like other libraries. \n\nMake every develop know whats under the hood its Javascript Proxies.\n\nIt will be doing one task only , is to watch any changes on target object and do setState underthehood.\n\nThis lib won't be doing multiple task like other react libs do\nEg : 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. \n\n## TODO\n\n- [x] Write initial testcases\n- [x] Integrate with `circleci`\n- [x] Add coveralls support\n- [x] A Simple demo sandbox app made from `react-chopper`\n- [x] A Complex computation demo sandbox app made from `react-chopper`\n- [x] A Super complex computation demo sandbox app made from `react-chopper`\n- [x] Documentation about\n- [x] Testcase that uses `react-chopper` lib from npm\n- [ ] Write some more Complex testcase scenarios for testing\n- [ ] Use `rollupjs` instead of `webpack`\n- [ ] Create seperate `develop` for all developer experiments\n- [ ] Setup mechanism to push tested code to `master branch` \n- [ ] Deploy package on npm from `circleci` from `master branch`\n- [ ] Add debug mode for debuging , watch changes purpose\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpawarvijay%2Freact-chopper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpawarvijay%2Freact-chopper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpawarvijay%2Freact-chopper/lists"}