Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
@accessible/drawer
Advanced tools
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.
style
objects, anything!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>
)
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. |
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.
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() . |
onChange | (open: boolean) => void | undefined | No | This callback is invoked any time the open state of the disclosure changes. |
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.
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. |
<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.
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.
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
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
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
const Component = () => {
const isOpen = useIsOpen()
return (
<Target>
<div className="my-drawer">Am I open? {isOpen ? 'Yes' : 'No'}</div>
</Target>
)
}
MIT
FAQs
🅰 An accessible and versatile drawer component for React
The npm package @accessible/drawer receives a total of 340 weekly downloads. As such, @accessible/drawer popularity was classified as not popular.
We found that @accessible/drawer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.