Repository files navigation

Yet another modal dialog built on react but with a simpler api and supports react-style animations. Inspired byhttps://github.com/rackt/react-modal.

.fade-appear {opacity:0;transition: opacity.5s ease-in;}.fade-appear.fade-appear-active {opacity:1;}.fade-leave {opacity:1;transition: opacity.5s ease-in;}.fade-leave.fade-leave-active {opacity:0;}

varModal=require('react-modal-component');varComponent=React.createClass({getInitialState:function(){return{showModal:false};},openModal:function(){this.setState({showModal:true});},closeModal:function(){this.setState({showModal:false});},render:function(){varnode=null;if(this.state.showModal){node=(<ModaltransitionName='fade'><h3>Plain old Modal</h3><buttononClick={this.closeModal}>Close Dialog</button></Modal>)}return(<div><buttononClick={this.openModal}>Show Dialog</button>{node}</div>)}});

npm install react-modal-component --save

optional :-

Usemodal.css included in this repo derived frommedium to support a responsive modal dialog.

Type: React Component

Basic modal.

Class name for the modal. (default:.modal-dialog)

Class name for the overlay/backdrop. (default:.overlay)

DOM node where the modal is appended. (default:document.body)

Transition name to base the animation on.

Function to call to close the dialog. Required to support propscloseOnEsc andcloseOnOutsideClick.

Boolean value to support closing of dialog on Esc. (default:false)

Boolean value to support closing of dialog on clicking outside the dialog. (default:false)

(see below)

(see below)

The CSSTransitionGroup component uses thetransitionend event, which browsers will not send for any number of reasons, including thetransitioning node not being painted or in an unfocused tab.

This component supports a variant ofTimeoutTransitionGroup to define a user-defined timeout to determinewhen it is a good time to remove the component. Note:- It's modified to supportenterTimeout forappear transition as well.

• Support server rendering.

To run the example:

npm install

npm run example

MIT