🪟 BottomSheet Component

A simple customizable bottom sheet (modal drawer) for React that supports touch gestures. Optimized for mobile devices, but also works on desktop.

🚀 Features

• 📱 Touch drag support (swipe down to close)
• ⚡ Smooth animations
• 🧹 Optional header and content customization
• 🌑 Overlay background with fade animation
• 🔒 Scroll locking when open

📦 Installation

npm install react-light-sheet
# or
yarn add react-light-sheet

🧠 Usage Example

import { useState } from "react";
import BottomSheet from "react-light-sheet";

export default function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Open Sheet</button>

      <BottomSheet
        isOpen={open}
        onClose={() => setOpen(false)}
      >
        <div style={{ padding: '1rem' }}>
          <h3>Bottom Sheet Content</h3>
          <p>
            You can put any content here — text, lists, buttons, forms, etc.
          </p>
        </div>
      </BottomSheet>
    </>
  );
}

⚙️ Props

| Prop | Type | Default | Description | | ------------------ | ------------ | -------------------- |--------------------------------------------------------------------------| | isOpen | boolean | — | Controls whether the sheet is visible. | | onClose | () => void | — | Callback fired when the sheet should close (overlay click or drag down). | | header | ReactNode | A default handle bar | Custom header area. | | children | ReactNode | — | Main content inside the bottom sheet. | | overlayClassName | string | "" | Additional class for the overlay. | | headerClassName | string | "" | Additional class for the header container. | | sheetClassName | string | "" | Additional class for the main sheet container. | | contentClassName | string | "" | Additional class for the content area. |