Chakra-UI

I♥️Components

Show / Hide

|

Chakra Docs

|

⦾ The Show and Hide components in Chakra UI are wrapper components that allow you to conditionally render or hide child elements based on media queries. These components provide a convenient way to control the visibility of content based on the screen size or other custom queries.

Both the Show and Hide components support the breakpoint prop, which allows you to pass a custom query for conditional rendering. You can use any valid CSS media query syntax as the value for the breakpoint prop.

These components can be imported as follows:

Examples

Basic Show and Hide

⦾ In this example, using the Show component, the first <Box> component will only be rendered if the screen width is 400px or smaller.

Similarly, using the Hide component, the second <Box> component will be hidden when the screen width is 400px or smaller.

Box One: <Show breakpoint="(max-width: 700px)">

This box shows only on screens 700px and smaller and disappears on screens 701px and larger.

Box Two: <Hide breakpoint="(max-width: 700px)">

This box hides on screens 700px and smaller and shows on screens 701px and larger.

Box Two

Code

Above and Below

⦾ The Show and Hide components also accept the above and below props, which correspond to the Chakra theme's breakpoint keys. The above prop behaves similarly to the CSS min-width property. It will render the child elements when the screen width is equal to or greater than the specified breakpoint.

In this example, the first <Box> component will be visible when the screen width is equal to or greater than the "sm" breakpoint defined in the Chakra theme. The second <Box> component will be hidden when the screen width is equal to or smaller than the "md" breakpoint.

Thebelow prop behaves similarly to the CSS max-width property. It will hide the child elements when the screen width is equal to or smaller than the specified breakpoint.

Box One: <Show above="sm">

This box shows when the screen width is equal to or greater than the "sm" breakpoint.

Box Two: <Hide below="md"

This box hides when the screen width is equal to or smaller than the "md" breakpoint.

Box Two

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.