Foundation.reveal as a React.js component

Modal.jsx

/**
 * @jsx React.DOM
 */

var React = require('react/addons');
/* the link component is used to navigate away from th current url. Some of it is app spesific and 
therefore not included here. */
var Link = require('../components/Link.jsx');
var cx = React.addons.classSet;

var Modal = React.createClass({

	propTypes: {
		url: React.PropTypes.string.isRequired,
	},

	getInitialState: function() {
		return {
			visibility: false
		};
	},
	componentDidMount: function() {
		document.addEventListener('keyup', this.handleDocumentKeyUp);
		setTimeout(function() {
			this.setState({
				'visibility': true
			});
		}.bind(this), 0);
	},

	componentWillUnmount: function() {
		document.removeEventListener('keyup', this.handleDocumentKeyUp);
	},

	hide: function() {
		window.history.back();
	},

	render: function() {
		var classes = {
			
			"reveal-modal": true,
			//"completed": true,
			//"open": this.state.visibility,
			"animatable": true,
			 "slide-in-right": true,
			 'active': this.state.visibility
		};
		var style = {
			display: "block",
			"-webkit-transform-origin": "0px 0px",
			"-webkit-transform": "scale(1, 1)",
			visibility: "visible",
			top: "100px"
		};
		return (
	<span>
		<div onClick={this.handleBackdropClick}  className="reveal-modal-bg" style={{opacity: 1, display: "block", 'zIndex': '300', "pointer-events": 'auto'}}></div>
		<div className={cx(classes)}>
			<Link url={this.props.url} className="close-reveal-modal">&#215;</Link>
			{this.props.children}
		</div>
	</span>
		);
	},

  handleBackdropClick: function (e) {
    if (e.target !== e.currentTarget) {
      return;
    }
    this.hide();
    //this.props.onRequestHide();
  },

  handleDocumentKeyUp: function (e) {
    if (e.keyCode === 27) {
      this.hide();
    }
  }
});

module.exports = Modal;

Got it just realized that you include this.props.children 😄

Another implementation: https://gist.github.com/dyatlov/aa357617cf0afeb5b19f