UNPKG

2.06 kBMarkdownView Raw
1react-skylight
2==============
3
4A react component for modals and dialogs
5
6## WIP.... This project still in development, use only if you know what you're doing or if you want help in development.
7
8
9Installation
10------------
11
12```sh
13npm install react-skylight
14```
15
16
17Features
18--------
19
20- Very simple modal/dialog
21- Unopinionated in or design, (CSS is not included, only a template is suggested (see more below).
22- Callback on show
23- Callback on hide
24
25
26
27
28How to use
29--------------------
30
31```js
32
33var SkyLight = require('react-skylight').SkyLight;
34
35var Veiculos = React.createClass({
36 showFirstDialog: function(){
37 this.refs.fisrtDialog.show();
38 },
39 showSecondDialog: function(){
40 this.refs.secondDialog.show();
41 },
42 render:function(){
43 return (
44 <div>
45 <a role="button" onClick={this.showFirstDialog}>Open First</a>
46 <br />
47 <a role="button" onClick={this.showSecondDialog}>Open Second</a>
48 <SkyLight ref="fisrtDialog" title="My first dialog">
49 Content for first dialog here.
50 </SkyLight>
51 <SkyLight ref="secondDialog" title="My second dialog">
52 Content for second dialog here.
53 </SkyLight>
54 </div>
55 )
56 }
57});
58```
59
60
61
62CSS suggested
63--------------------
64
65```css
66.skylight-dialog {
67 width: 50%;
68 height: 400px;
69 position: fixed;
70 top: 50%;
71 left: 50%;
72 margin-top: -200px;
73 margin-left: -25%;
74 background-color: #fff;
75 border-radius: 2px;
76 z-index: 100;
77 padding: 10px;
78 box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
79}
80
81.skylight-dialog--close {
82 cursor: pointer;
83 float: right;
84 font-size: 1.6em;
85}
86
87.skylight-dialog__overlay {
88 position: absolute;
89 top: 0;
90 left: 0;
91 width: 100%;
92 height: 100%;
93 z-index: 99;
94 background-color: rgba(0,0,0,0.3);
95}
96```
97
98
99
100TODO
101--------------------
102
103Tests
104
105Better Documentation
106
107More callbacks options
108
109More CSS Themes
110
111Site with examples
112
113...