<Drawer>
npm i @accessible/drawer
An accessible and versatile drawer component for React. This drawer is just a few new styles
on top of @accessible/collapse so when using both,
the drawer costs you nothing.
Features
- Style-agnostic You can use this component with the styling library of your choice. It
works with CSS-in-JS, SASS, plain CSS, plain
style
objects, anything! - Portal-friendly The drawer target will render into React portals of your choice when configured
to do so.
- a11y/aria-compliant This component works with screen readers out of the box and manages
focus for you.
Quick Start
Check out the example on CodeSandbox
import {Drawer, Target, Trigger, Close} from '@accessible/drawer'
const Component = () => (
<Drawer>
<Target>
<div className="my-drawer">
<Close>
<button>Close me</button>
</Close>
</div>
</Target>
<Trigger>
<button>Open me</button>
</Trigger>
</Drawer>
)
API
Components
Component | Description |
---|
<Drawer> | This component creates the context for your drawer target and trigger and contains some configuration options. |
<Target> | This component wraps any React element and turns it into a drawer target. |
<Trigger> | This component wraps any React element and turns it into a drawer trigger. |
<Close> | This is a convenience component that wraps any React element and adds an onClick handler to close the drawer. |
Hooks
<Drawer>
This component creates the context for your drawer target and trigger and contains some
configuration options.
Props
Prop | Type | Default | Required? | Description |
---|
defaultOpen | boolean | false | No | This sets the default open state of the drawer. By default the drawer is closed. |
open | boolean | undefined | No | You can control the open/closed state of the drawer with this prop. When it isn't undefined, this value will take precedence over any calls to open() , close() , or toggle() . |
id | string | undefined | No | By default this component creates a unique id for you, as it is required for certain aria attributes. Supplying an id here overrides the auto id feature. |
children | React.ReactNode | React.ReactNode[] | JSX.Element | ((context: DrawerContextValue) => React.ReactNode) | undefined | No | Your drawer targets and any other children. |
<Target>
This component wraps any React element and turns it into a drawer target.
Props
Prop | Type | Default | Required? | Description |
---|
placement | "top" | "right" | "bottom" | "left" | "left" | No | Sets the edge of the window you want your drawer target to render on. |
portal | boolean | string | false | No | When true this will render the drawer into a React portal with the id #portals . You can render it into any portal by providing its query selector here, e.g. #foobar , [data-portal=true] , or .foobar . |
closeOnEscape | boolean | true | No | By default the drawer will close when the Escape key is pressed. You can turn this off by providing false here. |
closedClass | string | undefined | No | This class name will be applied to the child element when the drawer is closed . |
openClass | string | undefined | No | This class name will be applied to the child element when the drawer is open . |
closedStyle | React.CSSProperties | undefined | No | These styles will be applied to the child element when the drawer is closed in addition to the default styles that set the target's visibility. |
openStyle | React.CSSProperties | undefined | No | These styles name will be applied to the child element when the drawer is open in addition to the default styles that set the target's visibility. |
children | React.ReactElement | undefined | Yes | The child is cloned by this component and has aria attributes injected into its props as well as the events defined above. |
Example
<Target>
<div className="alert">Alert</div>
</Target>
<Trigger>
This component wraps any React element and adds an onClick
handler which toggles the open state
of the drawer target.
Props
Prop | Type | Default | Required? | Description |
---|
closedClass | string | undefined | No | This class name will be applied to the child element when the drawer is closed . |
openClass | string | undefined | No | This class name will be applied to the child element when the drawer is open . |
closedStyle | React.CSSProperties | undefined | No | These styles will be applied to the child element when the drawer is closed . |
openStyle | React.CSSProperties | undefined | No | These styles name will be applied to the child element when the drawer is open . |
children | React.ReactElement | undefined | Yes | The child is cloned by this component and has aria attributes injected into its props as well as the events defined above. |
<Trigger on="click">
<button className="my-button">Open me!</button>
</Trigger>
<Close>
This is a convenience component that wraps any React element and adds an onClick handler which closes the drawer.
Props
Prop | Type | Default | Required? | Description |
---|
children | React.ReactElement | undefined | Yes | The child is cloned by this component and has aria attributes injected into its props as well as the events defined above. |
<Close>
<button className="my-button">Close me</button>
</Close>
useDrawer()
This hook provides the value of the drawer's DrawerContextValue object
Example
const Component = () => {
const {open, close, toggle, isOpen} = useDrawer()
return <button onClick={toggle}>Toggle the drawer</button>
}
DrawerContextValue
interface DrawerContextValue {
isOpen: boolean
open: () => void
close: () => void
toggle: () => void
id: string
}
useControls()
This hook provides access to the drawer's open
, close
, and toggle
functions
Example
const Component = () => {
const {open, close, toggle} = useControls()
return (
<Target>
<div className="my-drawer">
<button onClick={close}>Close me</button>
</div>
</Target>
)
}
useIsOpen()
This hook provides access to the drawer's isOpen
value
Example
const Component = () => {
const isOpen = useIsOpen()
return (
<Target>
<div className="my-drawer">Am I open? {isOpen ? 'Yes' : 'No'}</div>
</Target>
)
}
LICENSE
MIT