v3.2.0

Features

• #174 Introducing a modal manager.
• #173 Add CustomContainer example to the docs.

Bug fixes

• #57 fixed
• #137 fixed

v3.1.0

• add a container prop

Usage:

// If you want to render the portal inside your own container
const container = document.getElementById('my-custom-container-id');

export default class App extends React.Component {
  render() {
    return (
      <Modal container={container}>
        <p>I am in my-custom-container-id.</p>
      </Modal>
    );
  }
}

v3.0.3

• fix typescript typings #131

v3.0.2

Only publish the required files, installation size will be much lighter: from 14.9MB to 2.90MB (see https://packagephobia.now.sh/result?p=react-responsive-modal@3.0.2)

v3.0.1

The styles are now injected as a first element in the head.

v3.0.0

v3

• Compatible react 17 (using react-lifecycles-compat).
• Remove jss and embed the modal css.
  The build is now done with rollup and the css is injected at runtime.
  This will remove jss from the user bundle and remove the css entry point so now there is only one entry point 🎉.
• Rename the little prop to center.
• Added onEscKeyDown callback function.
• Added onOverlayClick callback function.
• Added onEntered callback function.
• Added onExited callback function.
• Added tests to the library.
• The close icon icon is now wrapped inside a button to handle the tab keypress changes. A new closeButton class has been introduced.
• Generate a commonjs and es6 module bundle.
• Typescript types.
• close issues #49, #16, #81, #96, #42.

Breaking changes

If you want to update from v2 to v3 you will have to do the following changes:

• Rename the little prop to center on the Modal component.
• If you are using the closeIcon class the styles moved to the closeButton class that wraps the close icon component.
• If you are using the css entry point

import 'react-responsive-modal/lib/react-responsive-modal.css';
import Modal from 'react-responsive-modal/lib/css';

need to be changed to

import Modal from 'react-responsive-modal';

the css is now bundled with the modal

This new version is inspired by the implementation of material-ui modal and react-modal thanks to them :)

v2.0.0

• Upgrade react-transition-group to v2
• Update all dependencies
• Allow custom animations for onEnter and onLeave
• Add the possibility to use only css instead of react-jss to reduce your bundle size (https://github.com/pradel/react-responsive-modal#usage-with-css)

Go to https://react-responsive-modal.leopradel.com/#example to see how to create custom styling, animations etc..

Upgrade from v1 to v2 (breaking changes)

The way to use custom styling as been modified. Before you had to use the ``,... props, now you have a single classNames or `styles` prop. Example: `<Modal classNames={{ overlay: 'my-custom-overlay-class', modal: 'my-custom-modal-class' }}` />