# simple-react-modal

> The simplest modal

Latest version **0.5.1** (published 2016-08-05) · ISC license · 0 weekly downloads

## Install

```sh
npm install simple-react-modal
pnpm add simple-react-modal
yarn add simple-react-modal
bun add simple-react-modal
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.1 |
| Published | 2016-08-05 |
| First published | 2015-07-29 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Zach Silveira |
| Maintainers | dphaener, zackify |
| Keywords | reactjs, modal, react, component |

## Links

- npm: https://www.npmjs.com/package/simple-react-modal
- Repository: https://github.com/legitcode/modal
- Issues: https://github.com/legitcode/modal/issues
- npm.io page: https://npm.io/package/simple-react-modal

## Recent versions

- 0.5.1 (latest) — 2016-08-05
- 0.5.0 — 2016-08-03
- 0.4.9 — 2016-04-13
- 0.4.8 — 2016-01-06
- 0.4.7 — 2015-09-22
- 0.4.6 — 2015-09-22
- 0.4.5 — 2015-09-21
- 0.4.4 — 2015-09-06
- 0.4.3 — 2015-09-06
- 0.4.2 — 2015-09-04
- 0.4.1 — 2015-08-19
- 0.4.0 — 2015-08-12
- 0.3.2 — 2015-08-12
- 0.3.1 — 2015-08-04
- 0.3.0 — 2015-08-01
- … 4 more at https://npm.io/package/simple-react-modal/versions

## README

##Simple React Modal

##Install

`npm install simple-react-modal`

###Simple?

~~~js
<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:

~~~js
<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](http://reactjsnews.com/modals-in-react/), I found none of the ones listed let you easily overwrite the css!

~~~js
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`.

---
_Source: https://npm.io/package/simple-react-modal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._