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:

• NPM & Node
• React JS
• HTML, CSS and JavaScript
• React JS Chakra UI

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.