React Chakra UI Other Show/Hide
Last Updated :
19 Feb, 2024
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;
|
Javascript
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.
Share your thoughts in the comments
Please Login to comment...