var React = require('react/addons');
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
var classNames = require('classnames');

module.exports = React.createClass({
	displayName: 'Modal',
	propTypes: {
		isOpen: React.PropTypes.bool,
		backdropClosesModal: React.PropTypes.bool,
		headerTitle: React.PropTypes.string,
		headerHasCloseButton: React.PropTypes.bool
	},
	render() {
		// classes
		var dialogClass = classNames('Modal-dialog', this.props.className);

		// elements
		var header = this.props.headerTitle ? <div className="Modal-header">
			{this.props.headerHasCloseButton ? <span onClick={this.props.onChange} className="Modal-close" /> : null}
			<h4 className="Modal-title">{this.props.headerTitle}</h4>
		</div> : null; 

		var modalBackground = this.props.isOpen ? <div className="Modal-backdrop" onClick={this.props.backdropClosesModal ? this.props.onChange : null} /> : null;
		var modalDialog = this.props.isOpen ? <div className={dialogClass}><div className="Modal-content">
			{header}
			{this.props.children}
		</div></div> : null;
		
		return (
			<div className="Modal">
				<ReactCSSTransitionGroup transitionName="Modal-dialog" component="div">
					{modalDialog}
				</ReactCSSTransitionGroup>
				<ReactCSSTransitionGroup transitionName="Modal-background" component="div">
					{modalBackground}
				</ReactCSSTransitionGroup>
			</div>
		);
	}
});

@@ -93,16 +93,54 @@
 nGroup;%0A
+var blacklist = require('blacklist');%0A
 var clas
@@ -423,16 +423,152 @@
 der() %7B%0A
+%09%09// props%0A%09%09var props = blacklist(this.props, %5B'backdropClosesModal', 'className', 'headerHasCloseButton', 'headerTitle', 'isOpen'%5D);%0A%0A
 %09%09// cla
@@ -1274,16 +1274,27 @@
 =%22Modal%22
+ %7B...props%7D
 %3E%0A%09%09%09%09%3CR

add element attribute props to modals