StartEnd

Responsive

Many of the properties for StartEnd can be responsive:

  1. Provide an array of breakpoints, which will be used in the (min-width) media queries used for responsive properties.
  2. Those breakpoint values can either be a number (converted to px) or a key from the theme (e.g. the default mineralTheme has 'narrow', 'medium', and 'wide').
  3. For each responsive property, instead of passing a single value, pass an array of values that is one longer than the breakpoints array. The first value applies when no breakpoint matches, the second value applies when the first breakpoint matches, and so on.
  4. If you don't need to change a value at a breakpoint, you can pass null to skip that breakpoint for that property.

The code in the example below exhibits the following behavior:

  1. When the viewport is less than 800px wide, it will display as a column.
  2. When the viewport is at least 800px wide, it will display as a row.
Start
End
<StartEnd
  breakpoints={[800]}
  direction={['column', 'row']}>
  <Box>Start</Box>
  <Box>End</Box>
</StartEnd>