##Simple React Modal

##Install

npm install simple-react-modal

###Simple?

<Modal show={this.state.show} onClose={this.close}> <div>hey, click outside of me to close me!</div> </Modal>

##Transitions

CSS powered transitions!

In your css file have a transition for the opacity: transition: 'opacity 1s ease-in', now all you do is add in the transition speed as a prop. In the css example I just gave, it's one second:

<Modal show={this.state.show} onClose={this.close} transitionSpeed={1000}> <div>hey, click outside of me to close me!</div> </Modal>

Now the component will open with your transition, and wait to hide until it finishes! Don't like transitions? Leave out the prop and everything works the same.

##Full Example

An incredibly simple modal dialog, because after writing this post, I found none of the ones listed let you easily overwrite the css!

import Modal, {closeStyle} from 'simple-react-modal' export default class App extends React.Component{ constructor(){ super() this.state = {} } show(){ this.setState({show: true}) } close(){ this.setState({show: false}) } render(){ return ( <div> <a onClick={this.show.bind(this)}>Open Modal</a> <Modal className="test-class" //this will completely overwrite the default css completely style={{background: 'red'}} //overwrites the default background containerStyle={{background: 'blue'}} //changes styling on the inner content area containerClassName="test" closeOnOuterClick={true} show={this.state.show} onClose={this.close.bind(this)}> <a style={closeStyle} onClick={this.close.bind(this)}>X</a> <div>hey</div> </Modal> </div> ) } }

###props

• closeOnOuterClick: If someone clicks outside of the modal when it's in focus, should it close? You choose. (bool)

• show: true or false

• onClose: when the modal is sending the close event (only happens is closeOnOuterClick is true)

• className: this will allow you to completely change the default css located in the component.

• containerClassName: change the class on the containing div

• containerStyle: changes styles on the modal content area

Minimum required props would be show and onClose. You can optionally pull in closeStyle to use the default close button.

###Why this modal?

The big difference is that you can use the default style, overwrite just the things you want with the style or containerStyle props, or throw on a class name and completely style everything yourself.

Customizing the style via a css class is easy, to target the actual content area it will be .your-class div.