1 | react-skylight
|
2 | ==============
|
3 |
|
4 | React-SkyhLight is a simple react component for modals and dialogs, powerfull, lightweight and unopinionated in or design.
|
5 |
|
6 |
|
7 | Installation
|
8 | ------------
|
9 |
|
10 | ```sh
|
11 | npm install react-skylight
|
12 | ```
|
13 |
|
14 | Features
|
15 | --------
|
16 |
|
17 | - Very simple modal/dialog
|
18 | - Unopinionated in or design, (CSS is not included, only a template is suggested (see more below).
|
19 | - Callback before open
|
20 | - Callback after open
|
21 | - Callback before close
|
22 | - Callback after close
|
23 |
|
24 |
|
25 | How to use
|
26 | --------------------
|
27 |
|
28 | ```js
|
29 |
|
30 | //Require react-skylight
|
31 | var SkyLight = require('react-skylight').SkyLight;
|
32 |
|
33 | var App = React.createClass({
|
34 | showDialogWithCallBacks: function(){
|
35 | this.refs.dialogWithCallBacks.show();
|
36 | },
|
37 | showSimpleDialog: function(){
|
38 | this.refs.simpleDialog.show();
|
39 | },
|
40 | render:function(){
|
41 | return (
|
42 | <div>
|
43 | <p>
|
44 | <button onClick={this.showSimpleDialog}>Modal without callbacks</button>
|
45 | <button onClick={this.showDialogWithCallBacks}>Modal with callbacks</button>
|
46 | </p>
|
47 | <SkyLight ref="dialogWithCallBacks" title="Hello!, I'm a modal with callbacks!"
|
48 | beforeOpen={this._executeBeforeFirstModalOpen}
|
49 | afterOpen={this._executeAfterFirstModalOpen}
|
50 | beforeClose={this._executeBeforeFirstModalClose}
|
51 | afterClose={this._executeAfterFirstModalClose}>I have callbacks!</SkyLight>
|
52 | <SkyLight ref="simpleDialog" title="Hi, I'm a simple modal">
|
53 | Hello, I dont have any callback.
|
54 | </SkyLight>
|
55 | </div>
|
56 | )
|
57 | },
|
58 | _executeBeforeFirstModalOpen: function(){
|
59 | alert('Executed before open');
|
60 | },
|
61 | _executeAfterFirstModalOpen: function(){
|
62 | alert('Executed after open');
|
63 | },
|
64 | _executeBeforeFirstModalClose: function(){
|
65 | alert('Executed before close');
|
66 | },
|
67 | _executeAfterFirstModalClose: function(){
|
68 | alert('Executed after close');
|
69 | }
|
70 | });
|
71 |
|
72 | React.render(<App/>, document.getElementById("content"));
|
73 |
|
74 | ```
|
75 |
|
76 | Options
|
77 | -------------------
|
78 | ####title: (String)
|
79 | A title for your modal.
|
80 | ``` html
|
81 | <SkyLight ref="myModal" title="TITLE FOR MODAL">Modal Content</SkyLight>
|
82 | ```
|
83 | ####showOverlay: (Boolean)
|
84 | Show modal with an overlay (true) or without an overlay (false).
|
85 |
|
86 | ``` html
|
87 | <SkyLight ref="myModal" title="TITLE FOR MODAL" showOverlay={true}>Modal With Overlay</SkyLight>
|
88 |
|
89 | <SkyLight ref="myModal" title="TITLE FOR MODAL" showOverlay={false}>Modal Without Overlay</SkyLight>
|
90 | ```
|
91 |
|
92 |
|
93 | ####beforeOpen, afterOpen, beforeClose and afterClose: (Function)
|
94 | A callback functions to execute before and after open and before and after close a modal. You can use just the one you want.
|
95 | ``` html
|
96 | <SkyLight ref="myModal" title="TITLE FOR MODAL"
|
97 | beforeOpen={myFunctionToExecuteBeforeOpen}
|
98 | afterOpen={myFunctionToExecuteAfterOpen}
|
99 | beforeClose={myFunctionToExecuteBeforeClose}
|
100 | afterClose={myFunctionToExecuteAfterClose}>Modal Content</SkyLight>
|
101 | ```
|
102 |
|
103 |
|
104 |
|
105 | CSS (suggested)
|
106 | --------------------
|
107 |
|
108 | ```css
|
109 | .skylight-dialog {
|
110 | width: 50%;
|
111 | height: 400px;
|
112 | position: fixed;
|
113 | top: 50%;
|
114 | left: 50%;
|
115 | margin-top: -200px;
|
116 | margin-left: -25%;
|
117 | background-color: #fff;
|
118 | border-radius: 2px;
|
119 | z-index: 100;
|
120 | padding: 10px;
|
121 | box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
|
122 | }
|
123 |
|
124 | .skylight-dialog--close {
|
125 | cursor: pointer;
|
126 | float: right;
|
127 | font-size: 1.6em;
|
128 | }
|
129 |
|
130 | .skylight-dialog__overlay {
|
131 | position: absolute;
|
132 | top: 0;
|
133 | left: 0;
|
134 | width: 100%;
|
135 | height: 100%;
|
136 | z-index: 99;
|
137 | background-color: rgba(0,0,0,0.3);
|
138 | }
|
139 | ```
|
140 |
|
141 | ##Enjoy!
|