Zero Dependency Bottom Sheet

A lightweight, customizable React bottom sheet component with zero dependencies.

Installation

npm install zero-dependency-bottom-sheet

OR

yarn add zero-dependency-bottom-sheet

Features

🚫 Zero dependencies

📱 Responsive design

🎯 Snap points for precise positioning

🎨 Highly customizable styling

🔄 Smooth animations

📲 Touch-friendly drag gestures

Usage

import React, { useState } from "react";
import "./App.css";
import { BottomSheet } from "zero-dependency-bottom-sheet";

const App: React.FC = () => {
  const [isSheetVisible, setIsSheetVisible] = useState(false);

  const showSheet = () => {
    setIsSheetVisible(true);
  };

  const hideSheet = () => {
    setIsSheetVisible(false);
  };

  return (
    <div className="App">
      <button className="show-btn" onClick={showSheet}>
        Show Bottom Sheet
      </button>
      <BottomSheet
        isOpen={isSheetVisible}
        onClose={hideSheet}
        initialHeight={50}
        borderRadius={20}
        backdropOpacity={0.5}
        dragAreaColor={"#000000"}
        dragIconColor={"red"}
        closeOnOverlayClick={true}
        snapPoints={[25, 60]}
        backgroundColor="red"
      >
        <BottomSheet.Header>
          <div
            style={{
              display: "flex",
              justifyContent: "center",
              background: "blue",
            }}
          >
            This is the Header
          </div>
        </BottomSheet.Header>
        <BottomSheet.Body>
          <div style={{ background: "red", padding: "25px 60px" }}>
            <h2>Bottom Sheet Modal</h2>
            <button
              style={{ color: "black", background: "GrayText" }}
              onClick={hideSheet}
              data-testid="close-button"
            >
              Close the sheet
            </button>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores,
              quisquam rem laborum adipisci voluptate deleniti officiis alias
              minima perspiciatis, nostrum quibusdam! Doloribus nam obcaecati
              blanditiis ducimus quasi optio aliquid aspernatur.
            </p>
          </div>
        </BottomSheet.Body>
      </BottomSheet>
    </div>
  );
};

export default App;

Props

Props

Props

| Prop | Type | Default | Description | Required/Optional | | :------------------ | :---------------- | :---------- | :------------------------------------------------------------------------------------------ | :---------------- | | isOpen | boolean | required | Controls the visibility of the bottom sheet | Required | | onClose | () => void | required | Callback function when bottom sheet is closed | Required | | children | React.ReactNode | required | Content to be rendered inside the bottom sheet | Required | | initialHeight | number | 50 | Initial height of the bottom sheet in percentage (values greater than 85 will be set to 85) | Optional | | backdropColor | string | '#000000' | Color of the backdrop overlay | Optional | | backdropOpacity | number | 0.5 | Opacity of the backdrop overlay (0-1) | Optional | | borderRadius | number | 20 | Border radius of the bottom sheet in pixels | Optional | | dragAreaColor | string | '#000000' | Color of the drag handle area | Optional | | dragIconColor | string | '#ffffff' | Color of the drag handle | Optional | | closeOnOverlayClick | boolean | true | Close the bottom sheet when overlay is clicked | Optional | | snapPoints | number[] | undefined | Define snapping positions during dragging (values greater than 85 will be set to 85) | Optional | | backgroundColor | string | '#ffffff' | Background color of the content part of the bottom sheet | Optional |

License

MIT © Ahmad Ghorbani