Migrating from V1 to V2

This doc guides you through migrating from reactjs-popup v1 to v2.

As you may now, v2 is a complete rewrite of reactjs-popup first version, and we built the new version very carefully to make sure everything works as expected with the old component API.

Unfortunately, with v2 improvements, you have some breaking changes for the following use cases.

Nested Popup

If you are using nested modal, tooltips you should set nested as true.

Default styling

In reactjs-popup v1 we are shipping some default inline CSS styles that people usually override, and because all those styles are inline you can't override them using CSS className.

For these reasons, we thought that maybe it would be more clean and practical to make those styles as a CSS file to make sure people can override them easily:

  • Import default style from the package :
import 'reactjs-popup/dist/index.css';

or

  • Add this CSS snippet to your CSS files
.popup-content {
margin: auto;
background: rgb(255, 255, 255);
width: 50%;
padding: 5px;
}
.popup-arrow {
color: rgb(255, 255, 255);
}
[role='tooltip'].popup-content {
width: 200px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 0px 3px;
}
.popup-overlay {
background: rgba(0, 0, 0, 0.5);
}
[data-popup='tooltip'].popup-overlay {
background: transparent;
}