React Chakra UI Other Show/Hide
Last Updated :
28 Apr, 2025
React Chakra UI Show and Hide components are used to show or hide children elements when a specific media query matches. We can provide custom media query to the Show and Hide components or use the predefined responsive size defined by Chakra UI.
Prerequisites:
Approach:
We will create a simple containers having different background colors which will appear on screen on specified breakpoints. We will also use the above and below props of the Show and Hide components.
Steps to Create React Application And Installing Module:
Step 1: Create a react application using the create-react-app.
npx create-react-app my-chakraui-app
Step 2: Move to the created project folder (my-chakraui-app).
cd my-chakraui-app
Step 3: After Creating the react app install the needed packages using below command
npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6
Project Structure:
The updated dependencies in the package.json file are:
"dependencies": {
"@chakra-ui/react": "^2.8.2",
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"framer-motion": "^6.5.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}Example: Below is the practical implementation of the Chakra UI Other Show/Hide:
JavaScript
import {
ChakraProvider,
Text
} from "@chakra-ui/react";
import "./App.css";
import ShowHideExample
from "./components/ShowHideExample";
function App() {
return (
<ChakraProvider>
<Text
color="#2F8D46"
fontSize="2rem"
textAlign="center"
fontWeight="600"
mt="1rem">
GeeksforGeeks
</Text>
<Text
color="#000"
fontSize="1rem"
textAlign="center"
fontWeight="500"
mb="2rem">
Chakra UI Show/Hide
</Text>
<ShowHideExample />
</ChakraProvider>
);
}
export default App;
import React from 'react';
import {
Box,
Show,
Hide
} from '@chakra-ui/react';
export default function ShowHideExample() {
return (
<Box
display="flex"
flexDirection="column"
gap="2px"
justifyContent="center"
alignItems="center"
textAlign="center">
<Show breakpoint='(max-width: 800px)'>
<Box
backgroundColor="green"
padding="20px"
width="100%">
Show on ViewPort
Width less than 800px
</Box>
</Show>
<Hide breakpoint='(max-width: 800px)'>
<Box
backgroundColor="red"
padding="20px"
width="100%">
Hide on ViewPort
Width less than 800px
</Box>
</Hide>
<Show above='md'>
<Box
backgroundColor="green"
padding="20px"
width="100%">
Show above
<strong>
md
</strong>
width
</Box>
</Show>
<Hide below='md'>
<Box
backgroundColor="red"
padding="20px"
width="100%">
Hide below
<strong>
md
</strong>
width
</Box>
</Hide>
</Box>
);
}
Steps to Run the Application using the below command:
npm run start
Output: Go to http:localhost:3000 on your browser to see output.
Similar Reads
React Chakra UI Other Chakra UI is a useful tool that allows users to design appealing and practical websites and applications in a quick and easy way. It provides a variety of ready-to-use components that can be personalized and adjusted to meet different project needs, thus streamlining web development and making it mo
6 min read
React Chakra UI Other Transitions React Chakra UI has a Transition component which has types like Fade, ScaleFade, SlideFade, and Collapse. All these types provide animation effects and smooth transitions in the application. By using the transition types in the application, the appearance of the elements is enhanced and the applicat
3 min read
React Chakra UI Form Switch Chakra UI Form Switch is a component provided by Chakra UI for creating toggle switches in React applications. It is an alternative to checkboxes, allowing users to switch between enabled and disabled states. Using the props of the Chakra UI Form Switch we can customize its appearance by changing th
3 min read
React Chakra UI Overlay Drawer React Chakra UI Overlay Drawer enhances web app navigation, integrating smoothly with Chakra UI. It offers intuitive access to extra content, without disrupting the main interface. Simple and customizable, it elevates user engagement and satisfaction. Prerequisites:NPM and NodeReactHTML, CSS, and Ja
2 min read
React Chakra UI Grid Layout React Chakra UI Grid Layout is an incredibly powerful and flexible component designed to streamline the creation of responsive and aesthetically pleasing grid-based designs within web applications. As an integral part of the Chakra UI library, this grid layout system offers developers a seamless int
2 min read