React Chakra UI Other Show/Hide - Coding

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:

ps-show-hide

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.

chakraui-showhide

Reffered: https://www.geeksforgeeks.org

ReactJS

Related
Context API with useContext Hook
What are the dependencies in useEffect and why are they important?
React Chakra UI Navigation
React Chakra UI Data Display
React Chakra UI Data Display Stat

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	15