Show / Hide

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

    Source@chakra-ui/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 above and below props

Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel