Show / Hide

Show and Hide wrapper components render or not render the child elements if the media query matches.

Import

import { Show, Hide } from "@chakra-ui/react";

• Show: Show the children if the media query matches.
• Hide: Hide the children if the media query matches.

Usage

Breakpoint Prop

Use the breakpoint prop to pass in a custom query.

<Show breakpoint="(max-width: 400px)">
  <Box>This text appears only on screens 400px and smaller.</Box>
</Show>

Above / Below

The above and below props receive the Chakra theme's breakpoint keys.

• above is similar to "min-width"
• below is similar to "max-width"

<>
  <Show above="sm">
    <Box>This text appears at the "sm" value screen width or greater.</Box>
  </Show>
  <Hide below="md">
    <Box>This text hides at the "md" value screen width and smaller.</Box>
  </Hide>
</>

Note: You can not combine above and below props

Props

above

Description

A value from the breakpoints section in the theme. Will render children from that breakpoint and above. Default breakpoint values: sm, md, lg, xl, 2xl.

Type

string

below

Description

A value from the breakpoints section in the theme. Will render children from that breakpoint and below. Default breakpoint values: sm, md, lg, xl, 2xl.

Type

string

breakpoint

Description

A custom css media query that determines when the children are rendered. Will render children if that query resolves to true.

Type

string

ssr

Type

boolean