##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.