Bottom Sheet

A bottom sheet that slides up from the bottom edge. Enable midAnchorPoint and the sheet stops halfway on the first swipe, then opens fully on the second. Toggle mid-anchor mode in the demo to see the difference.

Live Demo

Source

BottomSheetExample.tsx

import {
  SwipeBarProvider,
  SwipeBarBottom,
  useSwipeBarContext,
} from "@luciodale/swipe-bar";

function App() {
  return (
    <SwipeBarProvider>
      <Sheet />
    </SwipeBarProvider>
  );
}

function Sheet() {
  const { openSidebar, openSidebarToMidAnchor, closeSidebar, bottomAnchorState } =
    useSwipeBarContext();

  return (
    <>
      <main>
        <button onClick={() => openSidebarToMidAnchor("bottom")}>
          Open to Mid
        </button>
        <button onClick={() => openSidebar("bottom")}>
          Open Full
        </button>
        <p>Anchor state: {bottomAnchorState}</p>
      </main>

      <SwipeBarBottom
        sidebarHeightPx={450}
        isAbsolute
        midAnchorPoint
        className="bg-gray-900 text-white"
      >
        <div>
          <button onClick={() => closeSidebar("bottom")}>Close</button>
          <p>Sheet content</p>
        </div>
      </SwipeBarBottom>
    </>
  );
}