Bottom-sheet-dialog NPM

bottom-sheet-dialog

bottom-sheet-dialog is a lightweight JavaScript library that provides an easy-to-use bottom sheet dialog component for web applications. It's designed to be framework agnostic, flexible, customizable, and easy to integrate into any project.

This bottom sheet is designed to do as little as the styling as possible so this leaves the the styling almost completely up to the content of the bottom sheet that is passed in as a child.

Repo

NPM

Looking for a React version, find it here

Features

Customizable snap points
Smooth animations and transitions
Touch-enabled drag interactions
Accessibility support
Customizable background color
Event callbacks for open, close, and snap events
Exclude specific elements from touch interactions

Installation

You can install bottom-sheet-dialog using npm:

npm

npm install bottom-sheet-dialog

yarn

yarn add bottom-sheet-dialog

pnpm

pnpm install bottom-sheet-dialog

Usage

Here's a basic example of how to use bottom-sheet-dialog:

Vanilla JavaScript Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bottom Sheet Dialog Example</title>
    <style>
      #bottom-sheet {
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        padding: 20px;
        background-color: white;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h1>Bottom Sheet Dialog Example</h1>

      <div id="bottom-sheet">
        <div class="sheet-content">
          <h2>Custom Component</h2>
          <p>This is a custom component inside the bottom sheet.</p>
        </div>
      </div>
    </div>

    <script type="module">
         //
         import { createBottomSheet } from "https://unpkg.com/bottom-sheet-dialog/dist/index.js";
      const bottomSheetElement = document.getElementById("bottom-sheet");

      const bottomSheet = createBottomSheet(bottomSheetElement, {
        snapPoints: [100, 300, window.innerHeight - 50],
        backgroundColor: "white",
      });

      // Clean up on page unload
      window.addEventListener("unload", () => {
        bottomSheet.destroy();
      });
    </script>
  </body>
</html>

React Example

import { createBottomSheet } from 'bottom-sheet-dialog';
import React, { useEffect, useRef } from 'react';

interface ReactBottomSheetProps {
  children: React.ReactNode;
  snapPoints?: number[];
  backgroundColor?: string;
  excludeElementRef?: React.RefObject<HTMLElement>;
}

export function ReactBottomSheet({
  children,
  snapPoints,
  backgroundColor = 'white',
  excludeElementRef,
}: ReactBottomSheetProps) {
  const bottomSheetReference = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (bottomSheetReference.current) {
      const bottomSheet = createBottomSheet(bottomSheetReference.current, {
        snapPoints,
        backgroundColor,
        excludeElement: excludeElementRef?.current || undefined,
      });

      return () => {
        bottomSheet.destroy();
      };
    }
  }, [snapPoints, backgroundColor, excludeElementRef]);

  return <div ref={bottomSheetReference}>{children}</div>;
}

API

createBottomSheet(element, props)

Creates a new bottom sheet instance.

element: The HTML element that will become the bottom sheet.
props: An object with the following properties:
- snapPoints: An array of numbers representing the snap points in pixels.
- backgroundColor: The background color of the bottom sheet (default: 'white').
- excludeElement: An HTML element to exclude from touch interactions.
- onOpen: Callback function called when the bottom sheet is fully opened.
- onClose: Callback function called when the bottom sheet is closed.
- onSnap: Callback function called when the bottom sheet snaps to a point, receives the snap index as an argument.

Returns an object with the following methods: