Migration Guide

This is a reference for upgrading your application to v2 of Semantic UI React. While there's a lot covered here, you probably won't need to do everything for your app.

Upgrade of react-popper for Popup

Popper.js v1 is out of date, v2 was released in Dec 2019, time to upgrade 🚀

offset can't be specified as string anymore

Previously it was possible to pass different units to the offset prop as units. This behavior was changed and offset accepts a tuple or a function. Examples in our docs were also updated.

popperModifiers should be defined as array now

The popperModifiers prop should be defined as an array with changed format (see Popper docs).

a wrapping element around Popup

We started to use an additional wrapping element around Popup for positioning, see Semantic-Org/Semantic-UI-React#3947 for more details. To pass props to this element popper shorthand can be used, see an example.

⚠️We also made a fix in Semantic-Org/Semantic-UI-React#4094 to transfer zIndex value to avoid any breaks.

Responsive component was removed

Responsive component was deprecated in 1.1.0. There are two main reasons for the removal: there is no connection between breakpoints and pure SSR (server side rendering) support.

@artsy/fresnel was proposed as a replacement as it properly handles SSR scenarios.

The full migration guide is available in Semantic-Org/Semantic-UI-React#4008, it contains more detailed explanation and examples for Next.js & Gatsby.

MountNode component was removed

MountNode component was deprecated in 1.1.0. The main reason for the removal is that the component should not be a part of the public API as it solves our specific issue with the Modal component. Additional details are available in Semantic-Org/Semantic-UI-React#4027.