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
andbelow
props
Props
above
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
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
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
ssr
Type
boolean