React Chakra UI Overlay Drawer - Coding

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:

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

Reffered: https://www.geeksforgeeks.org

ReactJS

Related
Multi Select Search Using ReactJS
React Chakra UI Other
React Chakra UI Typography Heading
What is the significance of the componentDidMount lifecycle method?
Describe the applyMiddleware function in Redux.

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