@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" }}} />