@olenbetong/sidebar
Sidebar component
Last updated 8 months ago by bjornarvh .
MIT · Original npm · Tarball · package.json
$ cnpm install @olenbetong/sidebar 
SYNC missed versions from official npm registry.

@olenbetong/sidebar

Sidebar for React that can be opened/closed.

Installation

NPM:

npm i @olenbetong/sidebar
import { Sidebar } from '@olenbetong/sidebar';

IIFE and ESM builds are available on unpkg.com. For IIFE, the components are available in the global ReactSidebar variable.

<script src="https://unpkg.com/@olenbetong/sidebar@latest/dist/iife/sidebar.min.js" type="text/javascript"></script>
<script type="text/javascript">
const { Sidebar } = ReactSidebar;
</script>
<script type="module">
import { Sidebar } from "https://unpkg.com/@olenbetong/sidebar@latest/dist/esm/sidebar.min.js";
</script>

Usage

Pass a boolean to the isOpen property to toggle the sidebar. The sidebar isn't automatically closed when the overlay is clicked, or Escape is pressed. Instead it calls the function passed to the onSetOpen property with a boolean indicating if the sidebar should be open.

Example:

import React from 'react';
import { Sidebar } from '@olenbetong/sidebar';

class MyComponent extends React.Component {
  state = {
    isOpen: false
  }

  handleSetOpen = (isOpen) => {
    this.setState({ isOpen });
  }

  render() {
    return <>
      <button onClick={() => this.handleSetOpen(true)}>Show sidebar</button>
      <Sidebar isOpen={this.state.isOpen} onSetOpen={this.handleSetOpen}>
        Put sidebar content here!
      </Sidebar>
    </>
  }
}

Styling

Any props not handled by the sidebar will be passed to the root element, so styling can be done using normal CSS classes or inline styles. Adding classes will not remove the sidebar classes, but append them.

If you need to pass props to the overlay element, you can send them to the sidebar in the overlayProps property.

<Sidebar style={{ background: "red" }} className="my-class" overlayProps={{ className: "my-overlay-class", style: { background: "black" }}} />

Current Tags

  • 2.0.12                                ...           latest (8 months ago)

15 Versions

  • 2.0.12                                ...           8 months ago
  • 2.0.11                                ...           9 months ago
  • 2.0.10                                ...           a year ago
  • 2.0.9                                ...           a year ago
  • 2.0.8                                ...           a year ago
  • 2.0.7                                ...           a year ago
  • 2.0.6                                ...           a year ago
  • 2.0.5                                ...           a year ago
  • 2.0.4                                ...           2 years ago
  • 2.0.3                                ...           2 years ago
  • 2.0.2                                ...           2 years ago
  • 2.0.0                                ...           2 years ago
  • 2.0.0-alpha.3                                ...           2 years ago
  • 2.0.0-alpha.2                                ...           2 years ago
  • 1.0.0-rc.1                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 3
This Month 5
Last Day 0
Last Week 0
Last Month 1
Dependencies (2)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |