A lightweight and performant React component to create drawers for app navigation, side control panel, etc.
How to use it:
1. Install and import the package.
# Yarn $ yarn add react-modern-drawer # NPM $ npm i react-modern-drawer
import React from 'react' import Drawer from 'react-modern-drawer' import 'react-modern-drawer/dist/index.css'
2. Create a basic drawer on the app.
const App = () => { const [isOpen, setIsOpen] = React.useState(false) const toggleDrawer = () => { setIsOpen((prevState) => !prevState) } return ( <> <button onClick={toggleDrawer}>Launch</button> <Drawer open={isOpen} onClose={toggleDrawer} direction='right'> <div>I am a drawer</div> </Drawer> </> ) } export default App
3. Available component props.
open: boolean onClose: () => void direction: 'left' | 'right' | 'top' | 'bottom' children?: React.ReactNode duration?: number overlayOpacity?: number overlayColor?: String style?: React.CSSProperties zIndex?: number size?: number
Preview:
Download Details:
Author: Farzin-Firoozi
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/Farzin-Firoozi/react-modern-drawer
License: MIT