ResponsiveContainer

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 ResponsiveContainer component.

Usage

The component requires a single property called showOn. This prop specifies for what device category the content shall be shown.

Example

<div>
  <ResponsiveContainer showOn={["tablet", "desktop"]}>
    <Text>I am only visible on large screens.</Text>
  </ResponsiveContainer>
  <ResponsiveContainer showOn={["mobile"]}>
    <Text>I am only visible on small screens.</Text>
  </ResponsiveContainer>
</div>