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 Node
• React
• HTML, CSS, and JavaScript
• React JS ChakraUI

Approach:

We will build the Overlay Drawer in the following example using Chakra UI with ReactJS. The Chakra UI Overlay Drawer provides various functionalities such as Drawer, DrawerBody, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerContent, DrawerCloseButton allowing developers to customize the appearance and behavior of the stepper according to their requirements.

Steps to Create the Project:

Step 1: Create a React application using the following command:

npx create-react-app gfg

Step 2: After creating your project folder(i.e. my-app), move to it by using the following command:

cd gfg

Step 3: After creating the React application, Install the required package using the following command:

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

Project Structure:

Project Structure

The updated dependencies in package.json will look like this:

"dependencies": {
    "@chakra-ui/icons": "^2.1.1",
    "@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": "^11.0.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
}

Example: Below is the basic example of the Chakra UI Overlay Drawer:

Javascript

// App.js File

import React from 'react';
import {
    ChakraProvider, Box,
    Text, useDisclosure,
    Button, Input
} from '@chakra-ui/react';
import {
    Drawer,
    DrawerBody,
    DrawerFooter,
    DrawerHeader,
    DrawerOverlay,
    DrawerContent,
    DrawerCloseButton,
} from '@chakra-ui/react'

function App() {

    const {
        isOpen, onOpen,
        onClose
    } = useDisclosure()
    const btnRef = React.useRef()
    return (
        <ChakraProvider>
            <Text
                color="#2F8D46"
                fontSize="2rem"
                textAlign="center"
                fontWeight="400"
                my="1rem">
                GeeksforGeeks - React JS Chakra UI concepts
            </Text>
            <Box w="40%" mx="auto">
                <Button ref={btnRef}
                    colorScheme='teal' onClick={onOpen}>
                    Open
                </Button>
                <Drawer
                    isOpen={isOpen}
                    placement='right'
                    onClose={onClose}
                    finalFocusRef={btnRef}>
                    <DrawerOverlay />
                    <DrawerContent>
                        <DrawerCloseButton />
                        <DrawerHeader>
                            Create your account
                        </DrawerHeader>

                        <DrawerBody>
                            <Input placeholder='Type here...' />
                        </DrawerBody>

                        <DrawerFooter>
                            <Button variant='outline'
                                mr={3} onClick={onClose}>
                                Cancel
                            </Button>
                            <Button colorScheme='blue'>
                                Save
                            </Button>
                        </DrawerFooter>
                    </DrawerContent>
                </Drawer>
            </Box>
        </ChakraProvider>
    );
}

export default App;

Steps to run the application:

npm start

Output:

Chakra UI Overlay Drawer