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:
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:
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" > w3wiki - 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: