ResponsiveHelper

Sometimes you want to display or hide some content on a page for a certain width of the user device. To enforce a consistent breakpoint for doing so one can use the ResponsiveHelper component.

ResponsiveHelper compared to ResponsiveContainer and ResponsiveSwitch gives you the most control as it is just a FAC component and doesn't render anything for you. In most of the cases you'll probably want to use one of the other two components. In cases where you e.g. want to change a prop of a component depending on the device width, ResponsiveHelper is the way to go.

Usage

The component requires only a children function that takes the current breakpoint as an argument.

Example

Resize your browser to see the icon change its size depending on the viewport.

<div>
  <ResponsiveHelper>
    {(breakpoint) => (
      <LockIcon
        scale={
          breakpoint === "mobile"
            ? "tiny"
            : breakpoint === "tablet"
              ? "small"
              : "big"
        }
      />
    )}
  </ResponsiveHelper>
</div>