cupcake-react-modal

Modal

React component for when you need a modal.

Usage

<link href="Modal.css" rel="stylesheet" />
<script src="http://fb.me/react-0.13.3.js" type="application/javascript"></script>
<script src="Modal.js" type="application/javascript"></script>

<Modal
	visible={ Boolean() }
	closable={ Boolean() }
	onShow={ function(){} }
	onHide={ function(){} }>

	<header>
		<h1>Your Modal</h1>
	</header>

	<p>Hello there</p>
</Modal>

React.createElement(Modal, {
	visible: Boolean(),
	closable: Boolean(),
	onShow: function(){},
	onHide: function(){}
},
	React.createElement('header', null, React.createElement('h1', null, "Your Modal")),
	React.createElement('p', null, "Hello there"));

• visible (Boolean) can be used to toggle visibility of the modal, defaults to false.

• closable (Boolean) can be used disable rendering of the close button and prevent closing the modal when the overlay is clicked. Defaults to true.

• onShow (function) is called when the modal becomes visible, defaults to an empty function.

• onHide (function) is called when the modal becomes not visible, default to an empty function.

What it does

Displays a modal and prevents the document from scrolling while visible.

The modal contains a close button and clicking on the translucent part of the overlay will also cause the modal to hide.

Why

Because React is awesome and modals are useful.

How you can help

File an issue if you find anything isn't working as expected.

Pull requests are always welcome, but you should open an issue before working on a new feature (both to ensure it's within the scope of this project and that it's not already being worked on).