Introduction

React Bottom Sheet Component

npm (scoped) (opens in a new tab) npm bundle size (scoped) (opens in a new tab) npm bundle size (scoped) (opens in a new tab)

Screenshot of sheet's example usage

  • ⚡️ PERFORMANT: every motion is done purely with CSS transforms, providing near-native UX.
  • 🪶 LIGHTWEIGHT: ~3.5kb mifified UMD, ~2kb gziped. 0 dependencies.
  • 🧘 MINIMALISTIC: nothing redundant, yet everything you may need.
  • ⚙️ TYPED: writen in TypeScript, so .d.ts file with prop and ref types included.

Getting Started

  1. Install the package:
pnpm i -P @wldyslw/react-bottom-sheet
  1. Use it:
import { useRef } from 'react';
import BottomSheet from '@wldyslw/react-bottom-sheet';
// don't forget styles! If you use TailwindCSS, you can include package to config.content and save even more precious kilobytes!
import '@wldyslw/react-bottom-sheet/lib/style.css';
 
function App() {
    const sheetRef = useRef(null);
 
    return (
        <>
            <button onClick={() => sheetRef.current?.open()}>Open Sheet</button>
            <BottomSheet ref={sheetRef}>Hello!</BottomSheet>
        </>
    );
}
API Reference