├── .gitignore
├── .travis.yml
├── LICENSE
├── README.md
├── index.js
├── package.json
└── test.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dummy


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | sudo: false
2 | language: node_js
3 | node_js:
4 |   - 'iojs'
5 |   - '0.12'
6 |   - '0.10'


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Hector Leon Zarco Garcia
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # react-assign
 2 | 
 3 | > Update React state without boilerplate
 4 | 
 5 | Lightweight shortcut for update the **state** of a React class without having to define a function handler for it.
 6 | 
 7 | ## Problem
 8 | 
 9 | Let's say you want to update 2 values whenever the user write something in an input, tipically you have to define 2 handlers for update their values:
10 | 
11 | ```javascript
12 |   var React = require('react');
13 | 
14 |   React.createClass({
15 |     getInitialState() {
16 |       return {
17 |         username: "",
18 |         password: ""
19 |       };
20 |     },
21 |     
22 |     updateName(e) {
23 |       var newName = e.target.value;
24 | 
25 |       this.setState({
26 |         "username": newName
27 |       });
28 |     },
29 | 
30 |     updatePass(e) {
31 |       var newPass = e.target.value;
32 | 
33 |       this.setState({
34 |         "password": newPass
35 |       });
36 |     },
37 | 
38 |     render() {
39 |       <div>
40 |         <input type="text" onChange={this.updateName}/>
41 |         <input type="password" onChange={this.updatePass}/>
42 |       </div>
43 |     }
44 |   });
45 | ```
46 | 
47 | ## Solution
48 | 
49 | Use **react-assign**:
50 | 
51 | ```javascript
52 |   var React = require('react');
53 |   var assignValue = require('react-assign');
54 | 
55 |   React.createClass({
56 |     getInitialState() {
57 |       return {
58 |         username: "",
59 |         password: ""
60 |       };
61 |     },
62 |     
63 |     render() {
64 |       <div>
65 |         <input type="text" onChange={assignValue(this, "username")}/>
66 |         <input type="password" onChange={assignValue(this, "password")}/>
67 |       </div>
68 |     }
69 |   });
70 | ```
71 | 
72 | ## API
73 | 
74 | #### assignValue(reactClassInstance, propertyName)
75 | 
76 | ##### reactClassInstance
77 | 
78 | Type: `Object`
79 | 
80 | Instance to set the value
81 | 
82 | ##### propertyName
83 | 
84 | Type: `String`
85 | 
86 | State property which will be updated
87 | 
88 | ## Conclusion
89 | 
90 | **React Assign** does that work for you and allows you to remove a lot of boilerplate from your classes.


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | /**
 4 |  * Assigns a value to a given property name automatically.
 5 |  * 
 6 |  * @param  {Object} target Object to set the state
 7 |  * @param  {String} prop   Property name
 8 |  * @param  {Object} e      DOM Event
 9 |  * @return {void}
10 |  */
11 | module.exports = function (target, prop) {
12 |   if (!target || !prop) return; 
13 | 
14 |   return function(e) {
15 |     var val = e.target.value;
16 |     var obj = {};
17 | 
18 |     obj[prop] = val;
19 |     target.setState(obj);
20 |   };
21 | };


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-assign",
 3 |   "version": "0.1.2",
 4 |   "description": "Update React state without boilerplate",
 5 |   "license": "MIT",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "https://github.com/zzarcon/react-assign.git"
 9 |   },
10 |   "author": {
11 |     "name": "zzarcon",
12 |     "email": "hezarco@gmail.com",
13 |     "url": "hectorleonzarco.com"
14 |   },
15 |   "engines": {
16 |     "node": ">=0.10.0"
17 |   },
18 |   "scripts": {
19 |     "test": "node test.js",
20 |     "amend": "git add . && git commit --amend --reuse-message=HEAD",
21 |     "push": "git push --tags && git push",
22 |     "release": "npm version patch --force && npm run amend && npm run push && npm publish"
23 |   },
24 |   "files": [
25 |     "index.js"
26 |   ],
27 |   "keywords": [
28 |     "react-component",
29 |     "react",
30 |     "assign",
31 |     "value",
32 |     "property",
33 |     "event",
34 |     "react-addon"
35 |   ]
36 | }


--------------------------------------------------------------------------------
/test.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 
3 | //TODO: Implement tests


--------------------------------------------------------------------------------