React Chakra UI Other Show/Hide
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" > w3wiki </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.
Contact Us