React-modal-component

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

Example Usage

``css

.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;
}

`

`js
var Modal = require('react-modal-component');

var Component = React.createClass({
getInitialState: function() {
return { showModal: false };
},
openModal: function() {
this.setState({showModal: true});
},
closeModal: function() {
this.setState({showModal: false});
},
render: function() {
var node = null;

if (this.state.showModal) {
node = (



Plain old Modal

Close Dialog

)
}

return
(

Show Dialog
{node}

)
}
});

`

Installation

npm install react-modal-component --save

optional :-

Use modal.css included in this repo derived from medium to support a responsive modal dialog.

API

#### Modal(props)

Type: React Component

Basic modal.

$3

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

$3

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

$3

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

#### props.transitionName

Transition name to base the animation on.

$3

Function to call to close the dialog. Required to support props closeOnEsc and closeOnOutsideClick.

$3

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

$3

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

$3

(see below)

$3

(see below)




Additional Information:

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

This component supports a variant of TimeoutTransitionGroup to define a user-defined timeout to determine
when it is a good time to remove the component. Note:- It's modified to support `enterTimeout` for `appear` transition as well.

Todo

* Support server rendering.

Example

To run the example:

npm install

npm run example`

License

MIT