Show / Hide

The Show and Hide components are wrappers for other elements and components to show or hide them based on a media query.

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 any of the props

Props#