1- Simple solution for React two-way data binding and forms validation.
2-
3- # Features
4-
5- - All major data binding scenarios are supported, including radio groups.
6- - Links to state's attributes.
7- - Links to deeply nested object and array elements with purely functional state updates.
8- - Ad-hoc boolean links for values equality and presence in array.
1+ Advanced React links for purely functional two-way data binding.
2+
3+ - Implements standard React 0.14 links API
4+ - API extensions:
5+ - Declarative binding to event handlers.
6+ - Simple form validation.
7+ - Link to plain object and array members with pure updates.
8+ - Derivative boolean links for checkbox and radio groups.
9+ - Reference implementation for 'linked' tags:
10+ - Standard tags: ` <Input /> ` (with validation), ` <Select /> ` , ` <TextArea /> `
11+ - Custom tags: ` <Radio /> ` , ` <Checkbox /> `
912
1013``` javascript
11- var phonebookLink = Link .state ( this , ' phonebook' );
14+ var linkToArray = Link .state ( this , ' phonebook' );
1215
13- var list = phonebookLink .map ( ( itemLink , idx ) => (
14- < div key= { idx }>
15- < input valueLink= { itemLink .at ( ' name' ) } / >
16+ var list = linkToArray .map ( ( itemLink , i ) => (
17+ < div key= { i }>
18+ < Input valueLink= { itemLink .at ( ' name' ) } / >
1619 < / div>
1720));
1821```
1922
20- This technology is the part of [ NestedReact] ( https://github.com/Volicon/NestedReact ) architecture, helping you to build
21- large React applications with [ full power of OO models ] ( https://github.com/Volicon/NestedTypes/ ) .
22- TodoMVC example is [ here ] ( https://github.com/gaperton/todomvc-nestedreact ) .
23+ > This technology is one of the key components of [ NestedReact] ( https://github.com/Volicon/NestedReact ) architecture,
24+ > helping you to build large-scale React applications with a powerful and fast [ NestedTypes ] ( https://github.com/Volicon/NestedTypes/ )
25+ > classical OO models .
2326
2427# Installation
2528
2629` npm install valuelink `
2730
2831CommonJS module, MIT License. No side dependencies.
2932
33+ ``` javascript
34+ // Links
35+ import Link from ' valuelink'
36+
37+ // React components with linked tags
38+ import { Input } from ' valuelink/tags.jsx'
39+ ```
40+
3041# API
3142
3243## Create link
3344
34- - Create link to react component's state attribute:
45+ - Create custom link: ` new Link( value, requestChange ) `
3546
3647 ``` javascript
37- var nameLink = Link . state ( this , ' name ' );
48+ var customLink = new Link ( this . value , x => this . value = x );
3849 ```
3950
40- - Create custom link:
51+ - Create link to react component ' s state attribute :
4152
4253 ```javascript
43- var customLink = new Link( this.value, x => this.value = x );
54+ var nameLink = Link.state ( this, ' name ' );
4455 ```
4556
4657## Update link
4758
48- - Update linked value:
59+ - Set link value: `link.set( x )` or `link.requestChange( x )`
4960
5061 ```javascript
51- <button onClick={ link.update( x => x + 1 ) } />
62+ <button onClick={ () => boolLink.set( !boolLink.value ) } />
5263 ```
53- or
64+
65+ - Update link value: `link.update( prevValue => newValue )`
66+
5467 ```javascript
55- <button onClick={ () => link.set( link.value + 1 ) } />
68+ <button onClick={ () => boolLink.update( x => !x ) } />
5669 ```
57- or
70+
71+ - Create action to handle UI event: `link.action( ( prevValue, Event ) => newValue )`
72+
5873 ```javascript
59- <button onClick={ () => link.requestChange( link.value + 1 ) } />
74+ <button onClick={ boolLink.action( x => !x ) } />
75+ ...
76+ const setValue = ( x, e ) => e.target.value;
77+ ...
78+ <input value={ link.value }
79+ onChange={ link.action( setValue ) } />
6080 ```
6181
6282## Links validation
6383
84+ Links has `link.check( condition, error = ' Invalid value' )` method which can be used to
85+ check the sequence of conditions. Checks can be chained.
86+
87+ `condition` is predicate function `linkValue => isValid` taking link value as an argument.
88+ Whenever `condition` returns falsy value, `link.error` will take the value of corresponding `error`.
89+ `link.error` field may be analyzed by custom `<Input />` control to indicate an error.
90+
91+ This mechanics can be used to add ad-hoc validation in `render`.
92+
6493- Simple asserts:
6594
6695 ```javascript
6796 var numLink = List.state( this, ' num' )
6897 .check( x => x >= 0 && x <=5 );
6998
70- console.log( numLink.validationError );
99+ console.log( numLink.error );
71100 ```
72101
73102- Validation asserts with custom error objects
74103 ```javascript
75104 var numLink = List.state( this, ' num' )
76105 .check( x => x >= 0 && x <=5, ' Number must be between 0 and 5 ' );
77106
78- console.log( numLink.validationError );
107+ console.log( numLink.error );
79108 ```
80109
81110- Chained validation asserts
@@ -84,10 +113,17 @@ CommonJS module, MIT License. No side dependencies.
84113 .check( x => x >= 0, ' Negative numbers are not allowed' )
85114 .check( x => x <= 5, ' Number should be not greater than 5 ' );
86115
87- console.log( numLink.validationError );
116+ console.log( numLink.error );
88117 ```
89118
90- ## Links to object and arrays
119+ ## Links to object and arrays
120+
121+ If linked value is plain object or array, it' s possible to generate
122+ links to their members . Whenever this derivative links will be
123+ updated, it will lead to proper purely functional update of the
124+ whole structure . I .e . if you have array in component state,
125+ and link to its element will be updated, it will lead to proper
126+ update of stateful component.
91127
92128- Take link to array or object member
93129 ` ` ` javascript
0 commit comments