Skip to content

Repository files navigation

React Modal

Accessible React Modal Dialog Component. This isn't ready to be used yet, still under development.

Accessibility Notes

Etc. etc. etc.

Usage

<ModalisOpen={bool}
onRequestClose={fn}
closeTimeoutMS={n}
>
<h1>Modal Content</h1>
<p>Etc.</p>
</Modal>

Inside an app:

/** @jsx React.DOM */varReact=require('react');varModal=require('react-modal');varappElement=document.getElementById('your-app-element');Modal.setAppElement(appElement);Modal.injectCSS();varApp=React.createClass({getInitialState: function(){return{modalIsOpen: false};},openModal: function(){this.setState({modalIsOpen: true});},closeModal: function(){this.setState({modalIsOpen: false});},render: function(){return(<div><buttononClick={this.openModal}>Open Modal</button><ModalisOpen={this.state.modalIsOpen}onRequestClose={this.closeModal}><h2>Hello</h2><buttononClick={this.closeModal}>close</button><div>I am a modal</div><form><input/><button>tab navigation</button><button>stays</button><button>inside</button><button>the modal</button></form></Modal></div>);}});React.renderComponent(<App/>,appElement);

About

No description, website, or topics provided.

Resources

Contributing

Stars

0 stars

Watchers

1 watching

Forks

Releases

Packages

Contributors

Languages