Responsive
Deprecated
Responsive can control visibility of content.

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