Skip to content

Commit

Permalink
slightly less junky README
Browse files Browse the repository at this point in the history
  • Loading branch information
ryanflorence committed Sep 25, 2014
1 parent cde1572 commit de0b661
Showing 1 changed file with 15 additions and 27 deletions.
42 changes: 15 additions & 27 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,26 +4,26 @@ React Modal
Accessible React Modal Dialog Component. This isn't ready to be used
yet, still under development.

Accessibility Notes
-------------------

Etc. etc. etc.

Usage
-----

```xml
<Modal
isOpen={this.state.modalIsOpen}
onRequestClose={this.handleModalCloseRequest}
closeTimeoutMS={150}
isOpen={bool}
onRequestClose={fn}
closeTimeoutMS={n}
>
<h1>Modal Content</h1>
<p>Etc.</p>
</Modal>
```

Accessibility Notes
-------------------



Inside the app:
Inside an app:

```js
/** @jsx React.DOM */
Expand All @@ -50,35 +50,23 @@ var App = React.createClass({
this.setState({modalIsOpen: false});
},

handleModalCloseRequest: function() {
// opportunity to validate something and keep the modal open even if it
// requested to be closed
this.setState({modalIsOpen: false});
},

render: function() {
return (
<div>
<button onClick={this.openModal}>Open Modal</button>
<Modal
closeTimeoutMS={150}
isOpen={this.state.modalIsOpen}
onRequestClose={this.handleModalCloseRequest}
onRequestClose={this.closeModal}
>
<h1>Hello</h1>
<h2>Hello</h2>
<button onClick={this.closeModal}>close</button>
<div>I am a modal</div>
<form>
<input />
<input />
<input />
<input />
<input />
<br/>
<button>hi</button>
<button>hi</button>
<button>hi</button>
<button>hi</button>
<button>tab navigation</button>
<button>stays</button>
<button>inside</button>
<button>the modal</button>
</form>
</Modal>
</div>
Expand Down

0 comments on commit de0b661

Please sign in to comment.