npm package: @onoffcanvas/react
Description: onoffcanvas react package
Author: onokumus
Latest version: 0.1.0-alpha.1

# @onoffcanvas/react [![NPM version](https://img.shields.io/npm/v/@onoffcanvas/react.svg?style=flat)](https://www.npmjs.com/package/@onoffcanvas/react) [![NPM monthly downloads](https://img.shields.io/npm/dm/@onoffcanvas/react.svg?style=flat)](https://npmjs.org/package/@onoffcanvas/react) [![NPM total downloads](https://img.shields.io/npm/dt/@onoffcanvas/react.svg?style=flat)](https://npmjs.org/package/@onoffcanvas/react)  

> onoffcanvas react package

Please consider following this project's author, [onokumus](https://github.com/onokumus), and consider starring the project to show your :heart: and support.

## Getting started

### Install
Install with [npm](https://www.npmjs.com/):

```sh
$ npm install --save @onoffcanvas/react
```

Install with [yarn](https://yarnpkg.com):

```sh
$ yarn add @onoffcanvas/react
```

### Usage

> html

Include `onoffcanvas` StyleSheet

  ```html
  <link rel="stylesheet" href="https://unpkg.com/@onoffcanvas/core/dist/onoffcanvas.min.css">
  ```

> es2015 module
```jsx
import React, { Component } from "react";
import { OnoffCanvas, OnoffCanvasToggler } from "@onoffcanvas/react";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false,
      position: "is-left"
    };
    this.handleOpen = this.handleOpen.bind(this);
    this.handlePosition = this.handlePosition.bind(this);
  }
  handleOpen() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }
  handlePosition(pos) {
    this.setState({
      position: pos
    });
  }

  render() {
    const { isOpen, position, ...rest } = this.state;
    return (
      <div className="App">
        <OnoffCanvas className={`is-fixed ${position}`} isOpen={isOpen} {...rest}>
          <OnoffCanvasToggler
            isOpen={isOpen}
            onClick={this.handleOpen}
            isAnimated
          />
          <h2>OC Demo</h2>
        </OnoffCanvas>
        <OnoffCanvasToggler
          isOpen={isOpen}
          onClick={this.handleOpen}
          isAnimated
        />
        <button onClick={(e) => this.handlePosition('is-top')}>is-top</button>
        <button onClick={(e) => this.handlePosition('is-right')}>is-right</button>
        <button onClick={(e) => this.handlePosition('is-left')}>is-left</button>
        <button onClick={(e) => this.handlePosition('is-bottom')}>is-bottom</button>
        <button onClick={(e) => this.handlePosition('is-center')}>is-center</button>
        <button onClick={(e) => this.handlePosition('is-full')}>is-full</button>
      </div>
    );
  }
}

export default App;
```

### Canvas Options

1. Position Options : `onoffcanvas` is in absolute position by default
  - add class `is-fixed` to fixed position

  ```jsx
  <OnoffCanvas className="onoffcanvas is-fixed"></OnoffCanvas>
  ```

2. Direction Options : `onoffcanvas` is in full-screen by default
  - `is-top`
  - `is-right`
  - `is-bottom`,
  - `is-left`
  - `is-center`

  ```jsx
  <OnoffCanvas className="onoffcanvas is-{top|right|bottom|left|center}" id="side-canvas"></OnoffCanvas>
  ```

3. Opened/Closed Options : `onoffcanvas` is closed by default
  - add class `is-open` to open.

  ```jsx
  <OnoffCanvas className="onoffcanvas is-open"></OnoffCanvas>
  ```

4. Hoverable Options :
  - add class `onoffcanvas-container` to parent element
  - add class `is-hoverable` to `onoffcanvas`

```jsx
<div className="onoffcanvas-container">
    <OnoffCanvas className="onoffcanvas is-hoverable"></OnoffCanvas>
</div>
  ```

### Author
**onokumus**
+ [GitHub Profile](https://github.com/onokumus)
+ [Twitter Profile](https://twitter.com/onokumus)
+ [LinkedIn Profile](https://linkedin.com/in/onokumus)

### License
Copyright © 2018, [onokumus](https://github.com/onokumus).
Released under the MIT License.

***

_This file was generated by [verb-generate-readme](https://github.com/verbose/verb-generate-readme), v0.8.0, on September 19, 2018._