Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
React Modal dialog component (using animate.css).
import React from "react";
import classNames from "classnames";
export default class Modal extends React.Component {
static propTypes = {
onClose: React.PropTypes.func.isRequired,
isActive: React.PropTypes.bool.isRequired
}
constructor(props) {
super(props);
this.state = {isActive: false, willClose: false};
}
componentWillReceiveProps(nextProps) {
if (nextProps.isActive) {
this.setState({isActive: true, willClose: false})
} else {
const self = this;
this.setState({willClose: true});
setTimeout(() => {
self.setState({isActive: false});
}, 500); // To animate closing the modal.
}
}
onClose() {
this.props.onClose();
}
render() {
const modalClasses = classNames({
"animated": true,
"slideInDown": this.state.isActive,
"slideOutUp": this.state.willClose
});
if (this.state.isActive) {
return (
<div>
<div
style={{
display: "block",
zIndex: "8887",
position: "absolute",
top: "0",
bottom: "0",
left: "0",
right: "0",
background: "gray",
opacity: "0.7"
}}
onClick={::this.onClose}
>
</div>
<div
className={modalClasses}
style={{
display: "block",
zIndex: "8888",
height: "200px",
width: "300px",
position: "absolute",
top: "0",
bottom: "0",
left: "0",
right: "0",
margin: "auto",
background: "white"
}}
>
<h1>Modal!!</h1>
<button className="btn" onClick={::this.onClose}>
Close
</button>
</div>
</div>
);
} else {
return false;
}
}
}
import React from "react";
import Modal from "Modal";
export default class TopPage extends React.Component {
constructor(props) {
super(props);
this.state = {isModalActive: false};
}
openModal() {
this.setState({isModalActive: true});
}
closeModal() {
this.setState({isModalActive: false});
}
render() {
return (
<div>
<Modal isActive={this.state.isModalActive} onClose={::this.closeModal}/>
<button className="btn" onClick={::this.openModal}>
Open modal
</button>
</div>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.