Responsive Styles

Hopper style props accept a specialized syntax to support responsive breakpoints. These responsive properties help build adaptive user interfaces.

Introduction

In addition to static values, all style props support object syntax to specify different values for the prop depending on a responsive breakpoint. Breakpoints are named following t-shirt sizing, and correspond to common device resolutions.

Example

A Div with a default background color overridden at each breakpoint. Resize your browser window to see this in action.

Breakpoints

In addition to the base, there are five breakpoints inspired by typical device resolutions.

NameMedia query
basemin-width: 0px
xsmin-width: 640px
smmin-width: 768px
mdmin-width: 1024px
lgmin-width: 1280px
xlmin-width: 1440px

Mobile-first

Hopper uses a mobile-first breakpoint system, similar to those in frameworks like Bootstrap and Tailwind.

It’s often best to start with the mobile first layout for a design, then add styles as the screen size increases, moving from small to larger screens.

Utility Methods

useResponsiveValue

To resolve a responsive value within a React component, Hopper provides a useResponsiveValue hook.