Socket
Socket
Sign inDemoInstall

@accessible/drawer

Package Overview
Dependencies
40
Maintainers
1
Versions
19
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    @accessible/drawer

An accessible and versatile drawer component for React


Version published
Maintainers
1
Install size
4.93 MB
Created

Readme

Source

<Drawer>

Bundlephobia Code coverage Build status NPM Version MIT License

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

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

HookDescription
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
PropTypeDefaultRequired?Description
defaultOpenbooleanfalseNoThis sets the default open state of the drawer. By default the drawer is closed.
openbooleanundefinedNoYou 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().
idstringundefinedNoBy 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.
childrenReact.ReactNode | React.ReactNode[] | JSX.Element | ((context: DrawerContextValue) => React.ReactNode)undefinedNoYour drawer targets and any other children.

<Target>

This component wraps any React element and turns it into a drawer target.

Props
PropTypeDefaultRequired?Description
placement"top" | "right" | "bottom" | "left" "left"NoSets the edge of the window you want your drawer target to render on.
portalboolean | string falseNoWhen 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.
closeOnEscapebooleantrueNoBy default the drawer will close when the Escape key is pressed. You can turn this off by providing false here.
closedClassstringundefinedNoThis class name will be applied to the child element when the drawer is closed.
openClassstringundefinedNoThis class name will be applied to the child element when the drawer is open.
closedStyleReact.CSSPropertiesundefinedNoThese 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.
openStyleReact.CSSPropertiesundefinedNoThese 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.
childrenReact.ReactElementundefinedYesThe 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
PropTypeDefaultRequired?Description
closedClassstringundefinedNoThis class name will be applied to the child element when the drawer is closed.
openClassstringundefinedNoThis class name will be applied to the child element when the drawer is open.
closedStyleReact.CSSPropertiesundefinedNoThese styles will be applied to the child element when the drawer is closed.
openStyleReact.CSSPropertiesundefinedNoThese styles name will be applied to the child element when the drawer is open.
childrenReact.ReactElementundefinedYesThe 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
PropTypeDefaultRequired?Description
childrenReact.ReactElementundefinedYesThe 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

Keywords

FAQs

Last updated on 25 Dec 2019

Did you know?

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

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc