|
| 1 | +export const meta = { |
| 2 | + title: 'Migration Guide', |
| 3 | + prevPage: { title: 'Prototypes', href: '/prototypes' }, |
| 4 | +} |
| 5 | + |
| 6 | +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. |
| 7 | + |
| 8 | +## Upgrade of `react-popper` for `Popup` |
| 9 | + |
| 10 | +_Popper.js v1 is out of date, v2 was released in Dec 2019, time to upgrade 🚀_ |
| 11 | + |
| 12 | +### `offset` can't be specified as string anymore |
| 13 | + |
| 14 | +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. |
| 15 | + |
| 16 | +```diff |
| 17 | + <> |
| 18 | +- <Popup offset="50px" /> |
| 19 | ++ <Popup offset={[50, 0]} /> |
| 20 | + <br /> |
| 21 | +- <Popup offset="-100%p" /> |
| 22 | ++ <Popup offset={({ popper }) => [-popper.width, 0]} /> |
| 23 | + </> |
| 24 | +``` |
| 25 | + |
| 26 | +### `popperModifiers` should be defined as array now |
| 27 | + |
| 28 | +The `popperModifiers` prop should be defined as an array with changed format (see [Popper docs](https://popper.js.org/docs/v2/migration-guide/#10-update-modifiers)). |
| 29 | + |
| 30 | +```diff |
| 31 | +-<Popup popperModifiers={{ preventOverflow: { padding: 0 } }} /> |
| 32 | ++<Popup popperModifiers={[{ name: 'preventOverflow', options: { padding: 0 } }]} /> |
| 33 | +``` |
| 34 | + |
| 35 | +## `Responsive` component was removed |
| 36 | + |
| 37 | +`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. |
| 38 | + |
| 39 | +[@artsy/fresnel](https://github.com/artsy/fresnel) was proposed as a replacement as it properly handles SSR scenarios. |
| 40 | + |
| 41 | +```diff |
| 42 | ++import { createMedia } from "@artsy/fresnel"; |
| 43 | +import React from "react"; |
| 44 | +-import { Responsive, Segment } from "semantic-ui-react"; |
| 45 | ++import { Segment } from "semantic-ui-react"; |
| 46 | + |
| 47 | ++const AppMedia = createMedia({ |
| 48 | ++ breakpoints: { |
| 49 | ++ mobile: 320, |
| 50 | ++ tablet: 768, |
| 51 | ++ computer: 992, |
| 52 | ++ largeScreen: 1200, |
| 53 | ++ widescreen: 1920 |
| 54 | ++ } |
| 55 | ++}); |
| 56 | ++const mediaStyles = AppMedia.createMediaStyle(); |
| 57 | ++const { Media, MediaContextProvider } = AppMedia; |
| 58 | + |
| 59 | +-const App = () => ( |
| 60 | +- <Responsive as={Segment} {...Responsive.onlyMobile}> |
| 61 | +- Mobile |
| 62 | +- </Responsive> |
| 63 | +-) |
| 64 | ++const App = () => ( |
| 65 | ++ <> |
| 66 | ++ <style>{mediaStyles}</style> |
| 67 | ++ <MediaContextProvider> |
| 68 | ++ <Segment as={Media} at="mobile"> |
| 69 | ++ Mobile |
| 70 | ++ </Segment> |
| 71 | ++ </MediaContextProvider> |
| 72 | ++ </> |
| 73 | ++); |
| 74 | +``` |
| 75 | + |
| 76 | +The full migration guide is available in [Semantic-Org/Semantic-UI-React#4008](https://github.com/Semantic-Org/Semantic-UI-React/pull/4008), it contains more detailed explanation and examples for Next.js & Gatsby. |
| 77 | + |
| 78 | +## `MountNode` component was removed |
| 79 | + |
| 80 | +`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. |
| 81 | +Additional details are available in [Semantic-Org/Semantic-UI-React#4027](https://github.com/Semantic-Org/Semantic-UI-React/pull/4027). |
0 commit comments