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.
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 anymorePreviously 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.
diff<> - <Popup offset="50px" /> + <Popup offset={[50, 0]} /> <br /> - <Popup offset="-100%p" /> + <Popup offset={({ popper }) => [-popper.width, 0]} /> </>
popperModifiers
should be defined as array nowThe popperModifiers
prop should be defined as an array with changed format (see Popper docs).
diff-<Popup popperModifiers={{ preventOverflow: { padding: 0 } }} /> +<Popup popperModifiers={[{ name: 'preventOverflow', options: { padding: 0 } }]} />
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 removedResponsive
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.
diff+import { createMedia } from "@artsy/fresnel"; import React from "react"; -import { Responsive, Segment } from "semantic-ui-react"; +import { Segment } from "semantic-ui-react"; +const AppMedia = createMedia({ + breakpoints: { + mobile: 320, + tablet: 768, + computer: 992, + largeScreen: 1200, + widescreen: 1920 + } +}); +const mediaStyles = AppMedia.createMediaStyle(); +const { Media, MediaContextProvider } = AppMedia; -const App = () => ( - <Responsive as={Segment} {...Responsive.onlyMobile}> - Mobile - </Responsive> -) +const App = () => ( + <> + <style>{mediaStyles}</style> + <MediaContextProvider> + <Segment as={Media} at="mobile"> + Mobile + </Segment> + </MediaContextProvider> + </> +);
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 removedMountNode
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.