react-aria-offcanvas
v1.4.3
Published
Accessible Off-Canvas component for React.js
Downloads
1,011
Maintainers
Readme
react-aria-offcanvas
Accessible Off-Canvas component for React.js
Demo
https://neosiae.github.io/react-aria-offcanvas/
Installation
Install react-aria-offcanvas
using npm:
npm install --save react-aria-offcanvas
Or via yarn:
yarn add react-aria-offcanvas
Usage
import React, { Component, Fragment } from 'react'
import OffCanvas from 'react-aria-offcanvas'
const Navigation = () => (
<nav id="menu">
<ul>
<li>
<a href="#m-i-1">Menu Item 1</a>
</li>
<li>
<a href="#m-i-2">Menu Item 2</a>
</li>
<li>
<a href="#m-i-3">Menu Item 3</a>
</li>
<li>
<a href="#m-i-4">Menu Item 4</a>
</li>
<li>
<a href="#m-i-5">Menu Item 5</a>
</li>
</ul>
</nav>
)
export default class App extends Component {
state = {
isOpen: false,
}
open = () => {
this.setState({ isOpen: true })
}
close = () => {
this.setState({ isOpen: false })
}
render() {
return (
<Fragment>
<button
id="menu-button"
aria-label="Menu"
aria-controls="menu"
aria-expanded={this.state.isOpen}
onClick={this.open}
>
Click here
</button>
<OffCanvas
isOpen={this.state.isOpen}
onClose={this.close}
labelledby="menu-button"
>
<button onClick={this.close}>Close</button>
<Navigation />
</OffCanvas>
</Fragment>
)
}
}
Props
The only required property for the component is isOpen
, which controls whether the component is displayed or not.
| Prop | Type | Default | Description |
| -------------------------- | -------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- |
| isOpen
| bool
| false
| Open or close OffCanvas. |
| width
| string
| 300px
| The width of OffCanvas. |
| height
| string
| 300px
| The height of OffCanvas. |
| position
| string
| left
| Position OffCanvas to the left
, right
, top
or bottom
. |
| mainContainerSelector
| string
| | Allow OffCanvas
to push your page. Pass a valid CSS selector of an element that should be pushed. |
| onClose
| func
| | Callback fired when the overlay is clicked or esc key is pressed. |
| closeOnEsc
| bool
| true
| Close OffCanvas on esc key. |
| closeOnOverlayClick
| bool
| true
| Close OffCanvas on overlay click. |
| lockBodyAfterOpen
| bool
| true
| Lock body overflow on menu open |
| trapFocusAfterOpen
| bool
| true
| Trap focus when OffCanvas is open. |
| returnFocusAfterClose
| bool
| true
| Return focus to the element that had focus before opening OffCanvas. |
| focusFirstChildAfterOpen
| bool
| | Set initial focus on the first focusable child inside OffCanvas. |
| focusThisChildAfterOpen
| string
| | Set initial focus on a specific child inside OffCanvas. Pass a valid CSS selector of an element that should receive initial focus. |
| style
| object
| { overlay: {}, content: {} }
| Inline styles object. It has two keys: overlay
- overlay styles and content
- OffCanvas styles. |
| className
| string
| | Custom className for OffCanvas. |
| overlayClassName
| string
| | Custom className for the overlay. |
| role
| string
| | Custom role for OffCanvas. |
| label
| string
| | Custom aria-label for OffCanvas. |
| labelledby
| string
| | Custom aria-labelledby for OffCanvas. |
License
MIT