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

Responsive
Responsive can control visibility of content.

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

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