Package Exports

@accessible/drawer

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@accessible/drawer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

<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

Hook	Description
`useDrawer()`	This hook provides the value of the drawer's DrawerContextValue object.
`useControls()`	This hook provides access to the drawer's `open`, `close`, and `toggle` functions.
`useIsOpen()`	This hook provides access to the drawer's `isOpen` value.

`<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>

// <div
//   class="alert"
//   aria-hidden="true"
//   id="collapse--12"
//   style="visibility: hidden; position: fixed; margin: auto; left: 0px; right: 0px; top: 50%; transform: translateY(-50%); z-index: 1;"
// >
//   Alert
// </div>

`<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>

// <button
//   class="my-button"
//   aria-controls="collapse--12"
//   aria-expanded="false"
// >
//   Open me!
// </button>

`<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>

// <button
//   class="my-button"
//   aria-controls="collapse--12"
//   aria-expanded="false"
// >
//   Close me
// </button>

`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