Sidebar component

Usage no npm install needed!

<script type="module">
  import olenbetongSidebar from 'https://cdn.skypack.dev/@olenbetong/sidebar';



Sidebar for React that can be opened/closed.



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 type="module">
import { Sidebar } from "https://unpkg.com/@olenbetong/sidebar@latest/dist/esm/sidebar.min.js";


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.


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!


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