Solid Bottomsheet

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

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

1// App.jsx
2import { createSignal } from "solid-js";
3
4import "solid-bottomsheet/styles.css";
5import { SolidBottomsheet } from "solid-bottomsheet";
6
7const App = () => {
8  const [isOpen, setOpen] = createSignal(false);
9  return (
10    <>
11      <button onClick={() => setOpen(true)}>Click me!</button>
12      {isOpen() && (
13        <SolidBottomsheet variant="default" onClose={() => setOpen(false)}>
14          <p>I'm inside the bottomsheet</p>
15        </SolidBottomsheet>
16      )}
17    </>
18  );
19};

Snap Variant

1// App.jsx
2
3import { createSignal } from "solid-js";
4
5import "solid-bottomsheet/styles.css";
6import { SolidBottomsheet } from "solid-bottomsheet";
7
8const App = () => {
9  const [isOpen, setOpen] = createSignal(false);
10  return (
11    <>
12      <button onClick={() => setOpen(true)}>Click me!</button>
13      {isOpen() && (
14        <SolidBottomsheet
15          variant="snap"
16          defaultSnapPoint={({ maxHeight }) => maxHeight / 2}
17          snapPoints={({ maxHeight }) => [maxHeight, maxHeight / 4]}
18          onClose={() => setOpen(false)}
19        >
20          <p>I'm inside the bottomsheet</p>
21        </SolidBottomsheet>
22      )}
23    </>
24  );
25};

Todo

• (Docs) Add examples to use the package with skypack and others
• (Feat) Make swipe down threshold configurable
• (Feat) Reduce overlay opacity on swipe down
• (Feat) Non-blocking view

Links

• Changelog
• GitHub
• NPM