File tree 1 file changed +15
-27
lines changed
1 file changed +15
-27
lines changed Original file line number Diff line number Diff line change @@ -4,26 +4,26 @@ React Modal
4
4
Accessible React Modal Dialog Component. This isn't ready to be used
5
5
yet, still under development.
6
6
7
+ Accessibility Notes
8
+ -------------------
9
+
10
+ Etc. etc. etc.
11
+
7
12
Usage
8
13
-----
9
14
10
15
``` xml
11
16
<Modal
12
- isOpen ={this.state.modalIsOpen }
13
- onRequestClose ={this.handleModalCloseRequest }
14
- closeTimeoutMS ={150 }
17
+ isOpen ={bool }
18
+ onRequestClose ={fn }
19
+ closeTimeoutMS ={n }
15
20
>
16
21
<h1 >Modal Content</h1 >
17
22
<p >Etc.</p >
18
23
</Modal >
19
24
```
20
25
21
- Accessibility Notes
22
- -------------------
23
-
24
-
25
-
26
- Inside the app:
26
+ Inside an app:
27
27
28
28
``` js
29
29
/** @jsx React.DOM */
@@ -50,35 +50,23 @@ var App = React.createClass({
50
50
this .setState ({modalIsOpen: false });
51
51
},
52
52
53
- handleModalCloseRequest : function () {
54
- // opportunity to validate something and keep the modal open even if it
55
- // requested to be closed
56
- this .setState ({modalIsOpen: false });
57
- },
58
-
59
53
render : function () {
60
54
return (
61
55
< div>
62
56
< button onClick= {this .openModal }> Open Modal< / button>
63
57
< Modal
64
- closeTimeoutMS= {150 }
65
58
isOpen= {this .state .modalIsOpen }
66
- onRequestClose= {this .handleModalCloseRequest }
59
+ onRequestClose= {this .closeModal }
67
60
>
68
- < h1 > Hello< / h1 >
61
+ < h2 > Hello< / h2 >
69
62
< button onClick= {this .closeModal }> close< / button>
70
63
< div> I am a modal< / div>
71
64
< form>
72
65
< input / >
73
- < input / >
74
- < input / >
75
- < input / >
76
- < input / >
77
- < br/ >
78
- < button> hi< / button>
79
- < button> hi< / button>
80
- < button> hi< / button>
81
- < button> hi< / button>
66
+ < button> tab navigation< / button>
67
+ < button> stays< / button>
68
+ < button> inside< / button>
69
+ < button> the modal< / button>
82
70
< / form>
83
71
< / Modal>
84
72
< / div>
You can’t perform that action at this time.
0 commit comments