Drawer

This is the <Drawer /> component.

---

Examples

<Button onClick={() => { setIsOpen(true)}}>Open Drawer</Button>
<DrawerComponent
    isOpen={isOpen}
    onClose={() => {
        setIsOpen((open) => !open)
        }}>
    Contents of drawer here
</DrawerComponent>

---

Basic Usage

import React, { useState } from 'react'

import Button from '@candy/kitkat/button'
import DrawerComponent from '@candy/kitkat/drawer'

const Drawer = (): JSX.Element => {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <div>
      <Button
        onClick={() => {
          setIsOpen(true)
        }}
      >
        Open Drawer
      </Button>

      <DrawerComponent
        isOpen={isOpen}
        onClose={() => {
          setIsOpen((open) => !open)
        }}
      >
        Contents of drawer here
      </DrawerComponent>
    </div>
  )
}

---

Props

Name	Type	Default	Description
appearance	left | right	right	The side of the screen where the drawer will appear on
children?	ReactNode	--	The content of the drawer
fullScreen?	boolean	false	Determines whether the drawer appears full screen or not
isOpen	boolean	false	Determines whether to display the Drawer and its contents
onClose	(e: React.MouseEvent<HTMLElement>) => void	--	The method used when the overlay behind the Drawer is clicked