Miss any of our Open RFC calls?Watch the recordings here! »

react-skylight

0.1.3 • Public • Published

react-skylight

React-SkyhLight is a simple react component for modals and dialogs, powerfull, lightweight and unopinionated in or design.

Installation

npm install react-skylight

Features

  • Very simple modal/dialog
  • Unopinionated in or design, (CSS is not included, only a template is suggested (see more below).
  • Callback before open
  • Callback after open
  • Callback before close
  • Callback after close

How to use

 
//Require react-skylight
var SkyLight = require('react-skylight').SkyLight;
 
var App = React.createClass({
  showDialogWithCallBacks: function(){
    this.refs.dialogWithCallBacks.show();
  },
  showSimpleDialog: function(){
    this.refs.simpleDialog.show();
  },
  render:function(){
    return (
      <div>
        <p>
          <button onClick={this.showSimpleDialog}>Modal without callbacks</button>
          <button onClick={this.showDialogWithCallBacks}>Modal with callbacks</button>
        </p>
        <SkyLight ref="dialogWithCallBacks" title="Hello!, I'm a modal with callbacks!"
                  beforeOpen={this._executeBeforeFirstModalOpen}
                  afterOpen={this._executeAfterFirstModalOpen}
                  beforeClose={this._executeBeforeFirstModalClose}
                  afterClose={this._executeAfterFirstModalClose}>I have callbacks!</SkyLight>
        <SkyLight ref="simpleDialog" title="Hi, I'm a simple modal">
          Hello, I dont have any callback.
        </SkyLight>
      </div>
    )
  },
  _executeBeforeFirstModalOpen: function(){
    alert('Executed before open');
  },
  _executeAfterFirstModalOpen: function(){
    alert('Executed after open');
  },
  _executeBeforeFirstModalClose: function(){
    alert('Executed before close');
  },
  _executeAfterFirstModalClose: function(){
    alert('Executed after close');
  }
});
 
React.render(<App/>, document.getElementById("content"));
 

Options

title: (String)

A title for your modal.

<SkyLight ref="myModal" title="TITLE FOR MODAL">Modal Content</SkyLight>

showOverlay: (Boolean)

Show modal with an overlay (true) or without an overlay (false).

<SkyLight ref="myModal" title="TITLE FOR MODAL" showOverlay={true}>Modal With Overlay</SkyLight>
 
<SkyLight ref="myModal" title="TITLE FOR MODAL" showOverlay={false}>Modal Without Overlay</SkyLight>

beforeOpen, afterOpen, beforeClose and afterClose: (Function)

A callback functions to execute before and after open and before and after close a modal. You can use just the one you want.

<SkyLight ref="myModal" title="TITLE FOR MODAL" 
            beforeOpen={myFunctionToExecuteBeforeOpen}
            afterOpen={myFunctionToExecuteAfterOpen}
            beforeClose={myFunctionToExecuteBeforeClose}
            afterClose={myFunctionToExecuteAfterClose}>Modal Content</SkyLight>

CSS (suggested)

.skylight-dialog {
    width: 50%;
    height: 400px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -25%;
    background-color: #fff;
    border-radius: 2px;
    z-index: 100;
    padding: 10px;
    box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
}
 
.skylight-dialog--close {
    cursor: pointer;
    float: right;
    font-size: 1.6em;
}
 
.skylight-dialog__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    background-color: rgba(0,0,0,0.3);
}

Enjoy!

Install

npm i [email protected]

Version

0.1.3

License

MIT

Last publish

Collaborators

  • avatar