Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/neosiae/react-aria-offcanvas
Accessible Off-Canvas component for React.js
https://github.com/neosiae/react-aria-offcanvas
accessibility javascript offcanvas reactjs
Last synced: 2 months ago
JSON representation
Accessible Off-Canvas component for React.js
- Host: GitHub
- URL: https://github.com/neosiae/react-aria-offcanvas
- Owner: neosiae
- License: mit
- Created: 2018-05-08T05:45:33.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-09-26T21:59:20.000Z (over 1 year ago)
- Last Synced: 2024-09-20T06:48:31.202Z (4 months ago)
- Topics: accessibility, javascript, offcanvas, reactjs
- Language: JavaScript
- Homepage: https://neosiae.github.io/react-aria-offcanvas/
- Size: 3.15 MB
- Stars: 23
- Watchers: 2
- Forks: 3
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-aria-offcanvas
    [](https://github.com/prettier/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
```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 (
Click here
Close
)
}
}
```
## 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