Minimal Drawer Component For React

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