Description:
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 App3. 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






