@onoffcanvas/react v0.1.0-alpha.1

@onoffcanvas/react

onoffcanvas react package

Please consider following this project's author, onokumus, and consider starring the project to show your :heart: 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

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

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