@hosseinnas/solid-bottom-sheet NPM

Solid Bottomsheet

npm npm bundle size GitHub

A light-weight, touch-interactive Bottomsheet UI component for Solid JS with zero dependencies.

Features

Two variants, default and snap
A handle for touch interactions
Swipe up/down to snap to configured snap points (for snap variant)
Swipe down to close
Predefined swipe down threshold to auto close (for default variant)
Touch outside (overlay) of the bottomsheet to close
Last but not the least, smooth transitions/animations

Demo

CodeSandbox - Open the sandbox preview in new tab and switch to responsive mode to use touch for interactions

solid-bottomsheet

Installation

npm install solid-bottomsheet

Props

Prop	Required	Value(s)
variant	✅	`default` \| `snap`
onClose	✅	A Function to close the bottomsheet
snapPoints	✅ (when variant is `snap`)	A Function to return an Array of numbers which represent the snap points
defaultSnapPoint	✅ (when variant is `snap`)	A Function to return a number which represent the default snap point

Examples

Default Variant

// App.jsx
import { createSignal } from "solid-js";

import "solid-bottomsheet/styles.css";
import { SolidBottomsheet } from "solid-bottomsheet";

const App = () => {
  const [isOpen, setOpen] = createSignal(false);
  return (
    <>
      <button onClick={() => setOpen(true)}>Click me!</button>
      {isOpen() && (
        <SolidBottomsheet variant="default" onClose={() => setOpen(false)}>
          <p>I'm inside the bottomsheet</p>
        </SolidBottomsheet>
      )}
    </>
  );
};

Snap Variant

// App.jsx

import { createSignal } from "solid-js";

import "solid-bottomsheet/styles.css";
import { SolidBottomsheet } from "solid-bottomsheet";

const App = () => {
  const [isOpen, setOpen] = createSignal(false);
  return (
    <>
      <button onClick={() => setOpen(true)}>Click me!</button>
      {isOpen() && (
        <SolidBottomsheet
          variant="snap"
          defaultSnapPoint={({ maxHeight }) => maxHeight / 2}
          snapPoints={({ maxHeight }) => [maxHeight, maxHeight / 4]}
          onClose={() => setOpen(false)}
        >
          <p>I'm inside the bottomsheet</p>
        </SolidBottomsheet>
      )}
    </>
  );
};