0.3.1 • Published 2 years ago

@wldyslw/react-bottom-sheet v0.3.1

Weekly downloads
-
License
-
Repository
github
Last release
2 years ago

React Bottom Sheet Component

npm (scoped) npm bundle size (scoped) npm bundle size (scoped)

  • ⚡️ PERFORMANT: every motion is done purely with CSS transforms, providing near-native UX.
  • 🪶 LIGHTWEIGHT: ~36kb uncompressed, ~11kb 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 install @wldyslw/react-bottom-sheet
  1. Use it:
import { useRef } from 'react';
import BottomSheet from '@wldyslw/react-bottom-sheet';
import '@wldyslw/react-bottom-sheet/lib/style.css'; // don't forget styles!

function App() {
    const sheetRef = useRef(null);

    return (
        <>
            <button onClick={() => sheetRef.current?.open()}>Open Sheet</button>
            <BottomSheet ref={sheetRef}>Hello!</BottomSheet>
        </>
    );
}

API Reference

Props

NameTypeDescription
children?ReactNodeSheet's content
className?stringAdditional class names that will be applied to the sheet
detents?(string | number)[]Array of detent values that sheet should stick to. Each detent be either a number of pixels or a percentage of the vertical viewport, both counting from the bottom to the top. Non-number or inapropriately formatted string values will be ignored. IMPORTANT: Detents should be in order from smallest to largest, otherwise the result might look stange. Example [100, 200, 300] [100, "50%"], ["90%"], Default ["50%", "97%"]
expansionSwitchThreshold?numberAmount of pixels that sheet should be dragged before switching expanded state Default 50
grabberVisible?booleanA Boolean value that determines whether the sheet shows a grabber at the top. Default false
largestUndimmedDetentIndex?numberThe largest detent's index that doesn’t dim the view underneath the sheet. Default value is -1 which means that dim is always enabled. Default -1
permanent?booleanControls whether sheet persists on page or not Default false

Ref Object Properties

NameTypeDescription
close() => voidCloses sheet
collapse() => voidCollapses sheet one detent down
expand() => voidExpands sheet one detent up
expandToIndex(i: number) => voidExpands sheet to specific detent by it's index
open() => voidOpens sheet
scrollContainerHTMLDivElement | nullReference to the DOM node which holds sheet's children

Credits

Some project solutions heavily inspired by stipsan's react-spring-bottom-sheet. Despite being no longer maintained, this project is still in order of magnitude more complex and mature than mine.

License

MIT

0.3.0

2 years ago

0.2.1

2 years ago

0.3.1

2 years ago

0.2.2

2 years ago

0.2.0

2 years ago

0.1.2

2 years ago

0.1.1

2 years ago

0.1.0

2 years ago