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.
| Name | Media query |
|---|---|
| base | min-width: 0px |
| xs | min-width: 640px |
| sm | min-width: 768px |
| md | min-width: 1024px |
| lg | min-width: 1280px |
| xl | min-width: 1440px |
Mobile-first
Hopper uses a mobile-first breakpoint system, similar to those in frameworks like Bootstrap and Tailwind.
sm: to target mobile devicesbase to target mobile devicesIt’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.