Accessible Off-Canvas component for React.js
npm install react-aria-offcanvas!npm !Travis (.org) branch !npm !npm bundle size 
Accessible Off-Canvas component for React.js
https://neosiae.github.io/react-aria-offcanvas/
Install react-aria-offcanvas using npm:
> npm install --save react-aria-offcanvas
Or via yarn:
> yarn add react-aria-offcanvas
``javascript
import React, { Component, Fragment } from 'react'
import OffCanvas from 'react-aria-offcanvas'
const Navigation = () => (
)
export default class App extends Component {
state = {
isOpen: false,
}
open = () => {
this.setState({ isOpen: true })
}
close = () => {
this.setState({ isOpen: false })
}
render() {
return (
aria-label="Menu"
aria-controls="menu"
aria-expanded={this.state.isOpen}
onClick={this.open}
>
Click here
onClose={this.close}
labelledby="menu-button"
>
)
}
}
`
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. |
MIT