# 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. |

react-offcanvas

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past