Yet another modal dialog built on react but simpler and supports react-style animations.
.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;
}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 = (
<Modal transitionName='zoom'>
<h3>Plain old Modal</h3>
<button onClick={this.closeModal}>Close Dialog</button>
</Modal>
)
}
return
(
<div>
<button onClick={this.openModal}>Show Dialog</button>
{node}
</div>
)
}
});npm install react-modal-component --save
optional :-
Use modal.css included in this repo derived from medium 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.
(see below)
(see below)
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.
- Support server rendering.
To run the example:
npm install
npm run example
MIT