postmanlabs/react-modal

Name: react-modal

Owner: Postman

Description: Accessible modal dialog component for React

Forked from: reactjs/react-modal

Created: 2016-07-11 16:47:23.0

Updated: 2016-08-11 08:30:31.0

Pushed: 2016-07-12 08:16:56.0

Homepage: https://reactjs.github.io/react-modal

Size: 2058

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

react-modal

Accessible modal dialog component for React.JS

Usage

al
Open={bool}
AfterOpen={afterOpenFn}
RequestClose={requestOpenFn}
oseTimeoutMS={n}
yle={customStyle}

1>Modal Content</h1>
>Etc.</p>
dal>

Styles

Styles are passed as an object with 2 keys, 'overlay' and 'content' like so

erlay : {
position          : 'fixed',
top               : 0,
left              : 0,
right             : 0,
bottom            : 0,
backgroundColor   : 'rgba(255, 255, 255, 0.75)'

ntent : {
position                   : 'absolute',
top                        : '40px',
left                       : '40px',
right                      : '40px',
bottom                     : '40px',
border                     : '1px solid #ccc',
background                 : '#fff',
overflow                   : 'auto',
WebkitOverflowScrolling    : 'touch',
borderRadius               : '4px',
outline                    : 'none',
padding                    : '20px'

Styles passed to the modal are merged in with the above defaults and applied to their respective elements. At this time, media queries will need to be handled by the consumer.

Using CSS Classes

If you prefer not to use inline styles or are unable to do so in your project, you can pass className and overlayClassName props to the Modal. If you do this then none of the default styles will apply and you will have full control over styling via CSS.

Overriding styles globally

The default styles above are available on Modal.defaultStyles. Changes to this object will apply to all instances of the modal.

Examples

Inside an app:

React = require('react');
ReactDOM = require('react-dom');
Modal = require('react-modal');

appElement = document.getElementById('your-app-element');


efault the modal is anchored to document.body. All of the following overrides are available.

ement
l.setAppElement(appElement);

ery selector - uses the first element found if you pass in a class.
l.setAppElement('#your-app-element');



t customStyles = {
ntent : {
top                   : '50%',
left                  : '50%',
right                 : 'auto',
bottom                : 'auto',
marginRight           : '-50%',
transform             : 'translate(-50%, -50%)'




App = React.createClass({

tInitialState: function() {
return { modalIsOpen: false };


enModal: function() {
this.setState({modalIsOpen: true});


terOpenModal: function() {
// references are now sync'd and can be accessed.
this.refs.subtitle.style.color = '#f00';


oseModal: function() {
this.setState({modalIsOpen: false});


nder: function() {
return (
  <div>
    <button onClick={this.openModal}>Open Modal</button>
    <Modal
      isOpen={this.state.modalIsOpen}
      onAfterOpen={this.afterOpenModal}
      onRequestClose={this.closeModal}
      style={customStyles} >

      <h2 ref="subtitle">Hello</h2>
      <button onClick={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>
);



tDOM.render(<App/>, appElement);

Testing

When using React Test Utils with this library, here are some things to keep in mind:

• You need to set isOpen={true} on the modal component for it to render its children.
• You need to use the .portal property, as in ReactDOM.findDOMNode(renderedModal.portal) or TestUtils.scryRenderedDOMComponentsWithClass(Modal.portal, 'my-modal-class') to acquire a handle to the inner contents of your modal.

By default the modal is closed when clicking outside of it (the overlay area). If you want to prevent this behavior you can pass the 'shouldCloseOnOverlayClick' prop with 'false' value.

al
Open={bool}
AfterOpen={afterOpenFn}
RequestClose={requestCloseFn}
oseTimeoutMS={n}
ouldCloseOnOverlayClick={false}
yle={customStyle}>

1>Force Modal</h1>
>Modal cannot be closed when clicking the overlay area</p>
utton onClick={handleCloseFunc}>Close Modal...</button>
dal>

Demos

• http://reactjs.github.io/react-modal/
• http://reactjs.github.io/react-modal/bootstrap