@onoffcanvas/react

onoffcanvas react package

Please consider following this project's author, onokumus, and consider starring the project to show your ❤️ and support.

Getting started

Install

Install with npm:

$ npm install --save @onoffcanvas/react

Install with yarn:

$ yarn add @onoffcanvas/react

Usage

html

Include onoffcanvas StyleSheet

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

es2015 module

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

<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

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

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

4. Hoverable Options :

• add class onoffcanvas-container to parent element
• add class is-hoverable to onoffcanvas

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

Author

onokumus

• GitHub Profile
• Twitter Profile
• LinkedIn Profile

License

Copyright © 2018, onokumus. Released under the MIT License.

---

This file was generated by verb-generate-readme, v0.8.0, on September 19, 2018.