react-modern-drawer

> creating drawers made easy!

!npm
!npm
!npm bundle size (version)
!npm bundle size (version)
!NPM

Low bundle size with fantastic performance

Demo 💻🔥

click here to see the demo

Browsers support

|
IE / Edge |
Firefox |
Chrome |
Safari |
iOS Safari |
Samsung |
Opera |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| All | All | All | All | All | All | All |

Install

``bash
npm install --save react-modern-drawer
`

or if you are using yarn :

`bash
yarn add react-modern-drawer
`

Usage

`tsx
import React from 'react'

// import component 👇
import Drawer from 'react-modern-drawer'

//import styles 👇
import 'react-modern-drawer/dist/index.css'

const App = () => {
const [isOpen, setIsOpen] = React.useState(false)
const toggleDrawer = () => {
setIsOpen((prevState) => !prevState)
}

return (
<>
Show
open={isOpen}
onClose={toggleDrawer}
direction='right'
className='bla bla bla'
>


export default App
`

API

| api | type | required | default | value | desciption |
| -------------------- | ------------------- | -------- | ---------------------------------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------- |
| direction | string | yes | "right" | "right" , "left" , "top","bottom" | Selecting the direction that drawer opens |
| open | boolean | yes | false | true , false | Select when to show drawer |
| onClose | function | no | ( )=>{ } | any executable function | This function is called when clicking on backdrop layer usually used for closing the drawer |
| size | number or string | no | 250 | integer or '{integer}px' or '{integer}vw' | Determines the size of drawer |
| style | React.CSSProperties | no | null | Normal stylings | Can be used for inline styles |
| duration | number | no | 300 | Any positive Integer | Determines the duration of opening the drawer |
| overlayOpacity | number | no | 0.4 | Number between 0 and 1 | Determines the opacity of overlay |
| overlayColor | string | no | "#000" | Any color code | Determines the color of overlay |
| enableOverlay | boolean | no | true | true , false | Determines whether to show the overlay |
| zIndex | number | no | 100 | Any positive Integer | Determines the zIndex of drawer |
| children | React.ReactNode | no | null | Any ReactNode | This is the same as props.children |
| className | string | no | undefined | - | normal regular classNames and stuff |
| overlayClassName | string | no | undefined | - | normal regular classNames and stuff |
| customIdSuffix | string | no | A random string based on Math.random() | - | Used for making different ids for drawers, can be customized for special cases. |
| lockBackgroundScroll | boolean | no | false | - | Locks the body scroll when drawer is open. |

Support

If you like this package please consider giving it a star.

Contribution

clone the project and run yarn install then run yarn start to run the main project.

then cd example and run yarn start` to start the development example in order to test the component.

any PRs are welcome!

License

MIT © Farzin-Firoozi