Semantic UI React  3.0.0-beta.2
GitHub CHANGELOG
Getting Started
IntroductionGet StartedCompositionShorthand PropsThemingLayout examplesPrototypesMigration guide to v3
Elements
ButtonContainerFlagHeaderDividerImageIconLabelInputListLoaderPlaceholderRailRevealSegmentStep
Collections
FormGridMessageMenuTableBreadcrumb
Views
AdvertisementCardCommentFeedItemStatistic
Modules
AccordionCheckboxDimmerEmbedModalDropdownPopupProgressRatingSearchSidebarStickyTransitionTab
Addons
PaginationConfirmPortalRadioSelectText AreaTransitionable Portal

Migration Guide to v3

This is a reference for upgrading your application to v3 of Semantic UI React.

Looking to upgrade your app to v2?
Migration guide to Semantic UI React is available here.

Native ref support

Risk: low

This change can be considered as improvement. You should not be affected if you did not used `ref` on Semantic UI React components.

The main change in v3 is the support of native refs to components to avoid usage of deprecated ReactDOM.findDOMNode(). It means that ref prop can be used to get a reference to the underlying DOM element instead of a React component instance.

For example, you can use ref to get a reference to the underlying DOM element of Button component:

All components from Semantic UI React v3 support native ref forwarding.
Note on Button, Input, TextArea
Button, Input and TextArea implemented some methods like focus() and blur() on their class instances. However, now you will get a reference to the underlying DOM element instead of a React component instance. You should be able to call these methods directly on the DOM element without any issues.
Removal of Ref component
Risk: high
You will be affected if you use `Ref` component.
Because of the native ref support, Ref component is no longer needed and was removed as it used deprecated APIs.
As we exported Ref component and recommended its usage everywhere we moved out Ref component to a separate package (@semantic-ui-react/component-ref). This means that you can use it already with both v2 & v3 to make the upgrade smoother.
`@semantic-ui-react/component-ref` is considered as a deprecated package, we don't plan maintain it, so please consider migration anyway. It also will not receive fixes related to usage of deprecated APIs from React.
More details on this change in Semantic-Org/Semantic-UI-React#4286.
Removal of Visibity component
Risk: high
You will be affected if you use `Visibility` component.
The main reason is performance that is far away from native APIs. We suggest to use Intersection Observer API directly or via React wrappers, for example: react-intersection-observer.
As it's not a straightforward replacement that may cause issues with adoption we moved out Visibility component to a separate package (@semantic-ui-react/component-visibility). This means that you can use it already with v2 or upcoming v3:
`@semantic-ui-react/component-visibility` is considered as a deprecated package, we don't plan maintain it, so please consider migration anyway. It also will not receive fixes related to usage of deprecated APIs from React.
More details on this change in Semantic-Org/Semantic-UI-React#4257.
Removal of static properties on Transition component
Risk: negligible
These properties were never referenced in documentation or suggested to be used.
Some static properties on Transition component were removed:
This properties should not be used in public APIs, but it's still a breaking change.
Prototypes
Previous page
Blazing deployments by  Vercel.