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

$3

`jsx
// 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 (
<>
setOpen(true)}>Click me!
{isOpen() && (
setOpen(false)}>


I'm inside the bottomsheet



)}

);
};
`

$3

`jsx
// 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 (
<>
setOpen(true)}>Click me!
{isOpen() && (
variant="snap"
defaultSnapPoint={({ maxHeight }) => maxHeight / 2}
snapPoints={({ maxHeight }) => [maxHeight, maxHeight / 4]}
onClose={() => setOpen(false)}
>


I'm inside the bottomsheet



)}

);
};
``

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