UNPKG

3.54 kBMarkdownView Raw
1react-skylight
2==============
3
4React-SkyhLight is a simple react component for modals and dialogs, powerfull, lightweight and unopinionated in or design.
5
6
7Installation
8------------
9
10```sh
11npm install react-skylight
12```
13
14Features
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
25How to use
26--------------------
27
28```js
29
30//Require react-skylight
31var SkyLight = require('react-skylight').SkyLight;
32
33var 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
72React.render(<App/>, document.getElementById("content"));
73
74```
75
76Options
77-------------------
78####title: (String)
79A title for your modal.
80``` html
81<SkyLight ref="myModal" title="TITLE FOR MODAL">Modal Content</SkyLight>
82```
83####showOverlay: (Boolean)
84Show 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)
94A 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
105CSS (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!