https://github.com/legitcode/modal

a react modal that lets you easily customize the css
https://github.com/legitcode/modal

Last synced: 9 months ago
JSON representation

a react modal that lets you easily customize the css

• Host: GitHub
• URL: https://github.com/legitcode/modal
• Owner: Legitcode
• Created: 2015-07-29T22:14:49.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2017-05-12T12:59:09.000Z (over 8 years ago)
• Last Synced: 2025-05-07T04:37:39.995Z (9 months ago)
• Language: JavaScript
• Homepage: http://legitcode.github.io/modal/
• Size: 216 KB
• Stars: 92
• Watchers: 7
• Forks: 18
• Open Issues: 5
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
## Simple React Modal

## Install

`npm install simple-react-modal`

### Simple?

~~~js

  
hey, click outside of me to close me!


~~~

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

  
hey, click outside of me to close me!


~~~

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 (

      


      Open Modal

      


      X

      
hey


      

      

    )

  }

}

~~~


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