Semantic UI React  1.0.0
GitHub CHANGELOG
Getting Started
IntroductionGet StartedCompositionShorthand PropsThemingLayout examplesPrototypes
Elements
ButtonContainerDividerFlagHeaderIconImageInputLabelListLoaderPlaceholderRailRevealSegmentStep
Collections
BreadcrumbFormMenuMessageTableGrid
Views
AdvertisementCardCommentFeedItemStatistic
Modules
AccordionCheckboxDimmerDropdownEmbedModalPopupProgressRatingSearchSidebarStickyTabTransition
Behaviors
Visibility
Addons
ConfirmMount NodePaginationPortalRadioResponsiveSelectText AreaTransitionable Portal

Responsive
Deprecated
Responsive can control visibility of content.

src/addons/Responsive/Responsive.js
Semantic UI Responsive Docs
Deprecation notice

Responsive component is deprecated and will be removed in the next major release. Please follow our upgrade guide.

Types

Responsive

Responsive is always visible.

Instead of Grid visibility breakpoints, Responsive doesn't render invisible content.

Minimal Width

You can pass minimal width value at which content will be displayed.

Maximum Width

You can pass maximum width value at which content will be displayed.

Mixed

You can pass minimal and maximum width value at which content will be displayed.

Content

Responsive can contain different content.

Usage

The Responsive component relies on browser environment variables and requires some additions tricks to work correctly with the server side rendering. We prepared an example that uses Responsive and NextJS.
Try on CodeSandbox

Predefined breakpoints

Responsive has predefined breakpoints that mimics SUI default variables.

OnUpdate

Responsive listens for window resize events and calls event handler.

Fire on mount

Responsive can fire callbacks immediately after mount.

This is the bottom