Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-modern-drawer

Package Overview
Dependencies
Maintainers
1
Versions
14
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-modern-drawer

Creating drawers in react made easy!

  • 1.0.2
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
33K
increased by11.51%
Maintainers
1
Weekly downloads
 
Created
Source

react-modern-drawer

creating drawers made easy!

NPM npmnpmnpm bundle size (version)npm bundle size (version)NPM

low bundle size with fantastic performance

Demo 💻🔥

click here to see the demo

Install

npm install --save react-modern-drawer

or if you are using yarn :

yarn add react-modern-drawer

Usage

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 (
        <>
            <button onClick={toggleDrawer}>Show</button>
            <Drawer
                open={isOpen}
                onClose={toggleDrawer}
                direction='right'
                className='bla bla bla'
            >
                <div>Hello World</div>
            </Drawer>
        </>
    )
}

export default App

API

apityperequireddefaultvaluedesciption
directionstringyes"right""right" , "left" , "top","bottom"Selecting the direction that drawer opens
openbooleanyesfalsetrue , falseSelect when to show drawer
onClosefunctionno( )=>{ }any executable functionThis function is called when clicking on backdrop layer usually used for closing the drawer
sizenumberno250Any positive IntegerDetermines the size of drawer in pixels
styleReact.CSSPropertiesnonullNormal stylingsCan be used for inline styles
durationnumberno300Any positive IntegerDetermines the duration of opening the drawer
overlayOpacitynumberno0.4Number between 0 and 1Determines the opacity of overlay
overlayColorstringno"#000"Any color codeDetermines the color of overlay
enableOverlaybooleannotruetrue , falseDetermines whether to show the overlay
zIndexnumberno100Any positive IntegerDetermines the zIndex of drawer
childrenReact.ReactNodenonullAny ReactNodeThis is the same as props.children
classNamestringnoundefined-normal regular classNames and stuff

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

Keywords

FAQs

Package last updated on 17 Mar 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc