ResponsiveSwitch

Sometimes you want to switch between different layouts on a page for a certain width of the user device. To enforce a consistent breakpoint for doing so one can use the ResponsiveSwitch component.

Usage

The component requires you to tell it what layout should be rendered at each breakpoint. If no element is provided for a breakpoint the children will be rendered without wrapping them.

Example

<div>
  <ResponsiveSwitch
    mobile={<Spacings.Inline />}
    tablet={<Spacings.Stack />}
    desktop={<Spacings.Stack />}
  >
    <Text>list item 1</Text>
    <Text>list item 2</Text>
  </ResponsiveSwitch>
</div>