Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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.

Awesome Lists containing this project

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.





);
}

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