React Remodal

Demo & Example

See the demo

Features

• Animated
• Customizable
• Responsive

Installation

npm install react-remodal --save

Usage

import createRemodal from 'react-remodal'
import 'react-remodal/styles/main.css'

// options to createRemodal are optional, see 'Customization' section.
const Remodal = createRemodal()

class Example extends Component {
  state = {
    isModalOpen: false
  }

  toggleModal () {
    this.setState({
      isModalOpen: !this.state.isModalOpen
    })
  }

  render () {
    return (
      <div>
        <button onClick={::this.toggleModal}>
          Open modal
        </button>
        <Remodal isOpen={this.state.isModalOpen} onClose={::this.toggleModal}>
          <h1>
            Lorem ipsum dolor sit amet.
          </h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
            enim ad minim veniam, quis nostrud exercitation ullamco laboris
            nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
            in reprehenderit in voluptate velit esse cillum dolore eu fugiat
            nulla pariatur. Excepteur sint occaecat cupidatat non proident,
            sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </Remodal>
      </div>
    )
  }
}

Customization

React remodal animates the dialog and overlay with css classes. You can pass custom classes to createRemodal. See below:

const Remodal = createRemodal({

  // these are the default values:
  classes: {
    'dialog': 'react-remodal__dialog',
    'dialogEnter': 'react-remodal__dialog--enter',
    'dialogEnterActive': 'react-remodal__dialog--enter-active',
    'dialogLeave': 'react-remodal__dialog--leave',
    'dialogLeaveActive': 'react-remodal__dialog--leave-active',
    'overlay': 'react-remodal__overlay',
    'overlayEnter': 'react-remodal__overlay--enter',
    'overlayEnterActive': 'react-remodal__overlay--enter-active',
    'overlayLeave': 'react-remodal__overlay--leave',
    'overlayLeaveActive': 'react-remodal__overlay--leave-active',
    'wrap': 'react-remodal__wrap',
    'wrapIsOpen': 'react-remodal__wrap--is-open'
  },

  // transition durations: should match the transition duration of your
  // css classes.
  //
  // these are the default values:
  transitions: {
    dialogEnterTimeout: 300,
    dialogLeaveTimeout: 300,
    overlayEnterTimeout: 300,
    overlayLeaveTimeout: 300
  }
})

Props

• isOpen - (bool) if the modal is open (default = false)
• onClose - (function) callback on close
• overlayClosesModal - (bool) if clicking on the overlay closes the modal (requires onClose)
• closeOnEscape - (bool) if keyboard escape closes the modal (requires onClose)

Recommendations

It is recommended to add overflow-y: scroll; to your body css, this way we prevent "jumpy" content.

body {
  overflow-y: scroll;
}

Development

npm start