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