Skip to content

nasaownsky/snap-react-drawer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

snap-react-drawer

As easy as your fingers snap drawer using createPortal.

!!!Demo: https://snap-components.netlify.app/?path=/story/snap-drawer--basic

Install

npm install snap-react-drawer

As easy as your fingers snap 👌

<Drawer isOpen={isOpen} onClose={() => setOpen(false)}>
  This is so easy!
</Drawer>

Simply modify styles and control dimensions

import Drawer from "snap-react-drawer";

function App() {
  const [isOpen, setOpen] = React.useState(false);

  return (
    <div className="App">
      <button onClick={() => setOpen(true)}>Open Drawer</button>
      <Drawer
        isOpen={isOpen}
        onClose={() => setOpen(false)}
        overlayClassName="overlayStyles" // this class modifies overlay styles
        bodyClassName="drawerStyles" // and this modifies drawer container
        size={300} // easy to control dimensions
      >
        Still so easy!
      </Drawer>
    </div>
  );
}

Props

  • isOpen: defines if the drawer open or not (required)
  • onClose: to close the drawer (required)
  • size: defines the width or height of the drawer depending on its position
  • overlayClassName: overrides overlay of the drawer (note: please use !important property in your css to make sure styles will apply)
  • bodyClassName: overrides body of the drawer (note: please use !important property in your css to make sure styles will apply)
  • closeButton: defines if the default close button is showing
  • closeOnClickOutside: defines if the drawer is closable on outside click
  • position: defines position of the drawer
  • duration: defines transition duration of the drawer
  • enableOverlay: defines if overlay of the drawer is enabled

About

As easy as your fingers snap drawer using createPortal.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published