Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vutran/react-offcanvas
:art: Off-canvas menus for React.
https://github.com/vutran/react-offcanvas
javascript react react-component sidebar
Last synced: about 2 months ago
JSON representation
:art: Off-canvas menus for React.
- Host: GitHub
- URL: https://github.com/vutran/react-offcanvas
- Owner: vutran
- License: mit
- Created: 2016-03-07T19:12:48.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2020-04-22T15:41:27.000Z (over 4 years ago)
- Last Synced: 2024-05-02T05:43:32.861Z (8 months ago)
- Topics: javascript, react, react-component, sidebar
- Language: JavaScript
- Homepage: http://vutran.github.io/react-offcanvas
- Size: 1.19 MB
- Stars: 49
- Watchers: 3
- Forks: 19
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-components-all - react-offcanvas - Off-canvas menus for React. (Uncategorized / Uncategorized)
- awesome-react-components - react-offcanvas - Off-canvas menus for React. (UI Components / Menu)
- awesome-react - react-offcanvas - Off-canvas menus for React.  (UI Components / Menu)
- awesome-list - react-offcanvas - Off-canvas menus for React. (Demos / Menu)
- awesome-react-components - react-offcanvas - Off-canvas menus for React. (UI Components / Menu)
- awesome-react-components - react-offcanvas - Off-canvas menus for React. (UI Components / Menu)
- awesome-react-components - react-offcanvas - Off-canvas menus for React. (UI Components / Menu)
- fucking-awesome-react-components - react-offcanvas - Off-canvas menus for React. (UI Components / Menu)
README
# React Off-Canvas
Off-canvas menus for React.
## Installation
```bash
$ npm install --save react-offcanvas
```
## Usage
### Basic Usage
```jsx
This is the canvas body.
This is the canvas menu.
```
### Within An Application
You'll need to hook up your application to handle the state for toggling the menu. Check out the basic example below:
```js
"use strict";
import React, { Component } from "react";
import { OffCanvas, OffCanvasMenu, OffCanvasBody } from "react-offcanvas";
export default class App extends Component {
componentWillMount() {
// sets the initial state
this.setState({
isMenuOpened: false
});
}
render() {
return (
This is the main body container.
Click here
{" "}
to toggle the menu.
Placeholder content.
- Link 1
- Link 2
- Link 3
- Link 4
- Link 5
-
Toggle Menu
);
}
handleClick() {
// toggles the menu opened state
this.setState({ isMenuOpened: !this.state.isMenuOpened });
}
}
```
## Components
### `OffCanvas`
This is the main component you will be using to compose your body and menu.
| Prop | Type | Default | Description |
| :------------------- | :------- | :------ | :--------------------------------------------------- |
| `width` | `number` | 250 | The width of the menu and off-canvas transition. |
| `transitionDuration` | `number` | 250 | The time in ms for the transition. |
| `isMenuOpened` | `bool` | false | Is the menu opened or not. |
| `position` | `string` | "left" | Position the menu to the "left" or "right". |
| `effect` | `string` | "push" | Choose menu effect. "push", "overlay" or "parallax". |
### `OffCanvasBody`
| Prop | Type | Default | Description |
| :------------------- | :------- | :------ | :----------------------------------------------- |
| `width` | `number` | 250 | The width of the menu and off-canvas transition. |
| `transitionDuration` | `number` | 250 | The time in ms for the transition. |
| `isMenuOpened` | `bool` | false | Is the menu opened or not. |
| `position` | `string` | "left" | Position the menu to the "left" or "right". |
| `className` | `string` | | Custom className for the element. |
| `style` | `object` | | CSS style object for the element. |
### `OffCanvasMenu`
| Prop | Type | Default | Description |
| :------------------- | :------- | :------ | :----------------------------------------------- |
| `width` | `number` | 250 | The width of the menu and off-canvas transition. |
| `transitionDuration` | `number` | 250 | The time in ms for the transition. |
| `isMenuOpened` | `bool` | false | Is the menu opened or not. |
| `position` | `string` | "left" | Position the menu to the "left" or "right". |
| `className` | `string` | | Custom className for the element. |
| `style` | `object` | | CSS style object for the element. |