Custom Toggle

The ToggleComponent prop accepts any React element. Pass it to SwipeBarLeft, SwipeBarRight, or SwipeBarBottom and the default arrow icon is replaced. Toggle between default and custom in the demo.

Live Demo

Source

CustomToggleExample.tsx

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

function ChevronToggle() {
  return (
    <div className="rounded-full bg-gray-800 border border-white/20 w-10 h-10 flex items-center justify-center">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <path d="M9 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </div>
  );
}

function App() {
  return (
    <SwipeBarProvider>
      <SwipeBarLeft ToggleComponent={<ChevronToggle />}>
        <nav>Sidebar content</nav>
      </SwipeBarLeft>

      <SwipeBarRight ToggleComponent={<ChevronToggle />}>
        <div>Settings</div>
      </SwipeBarRight>

      <SwipeBarBottom
        sidebarHeightPx={300}
        isAbsolute
        ToggleComponent={<ChevronToggle />}
      >
        <div>Bottom sheet</div>
      </SwipeBarBottom>

      <main>Content</main>
    </SwipeBarProvider>
  );
}