Skip to content

neosiae/react-aria-offcanvas

Repository files navigation

react-aria-offcanvas

npm Travis (.org) branch npm npm bundle size code style: prettier

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