Drawy. simple side panel management for the day-to-day

A lightweight, fully-typed React library for effortless management of side panels and drawers.

View on GitHub

Key Features

Fully typed

Easy integration

SSR friendly

Lightweight

Customizable

Stack multiple panels

First, setup Drawy:

import React from 'react';
import { createDrawy } from 'drawy';
import SettingsPanel from './SettingsPanel';
import ProfilePanel from './ProfilePanel';
import MainComponent from './MainComponent';

export const panels = {
  settings: SettingsPanel,
  profile: ProfilePanel,
};

export const { DrawyProvider, useDrawy } = createDrawy(panels);

const App: React.FC = () => (
  <DrawyProvider>
    <MainComponent />
  </DrawyProvider>
);

export default App;

Then, just use it!

import React from 'react';
import { useDrawy } from './app';

const MainComponent: React.FC = () => {
  const { open } = useDrawy();

  return (
    <div className="p-4">
      <button
        onClick={() => open('settings')}
        className="px-4 py-2 bg-blue-500 text-white rounded mr-2"
      >
        Open Settings
      </button>
      <button
        onClick={() => open('profile')}
        className="px-4 py-2 bg-green-500 text-white rounded"
      >
        Open Profile
      </button>
    </div>
  );
};

export default MainComponent;