Bottom Sheet

Last updated: 3.0.0 (04/07/2024)

In Valence 3, this component now imports from @valence-ui/core.

The Bottom Sheet is best used on touchscreen-only devices, thus it is suggested to use the Dynamic Sheet component instead.

The Bottom Sheet is an overlay that aims to replicate the common "slide up sheet" UI pattern on mobile devices. The sheet will respond to pointer or touch drag.

Usage

import { BottomSheet, useDisclosure, Button } from "@valence-ui/core";

function MyComponent() { 
    const disclosure = useDisclosure();

    return ( 
        <>
            <Button
                onClick={() => disclosure.open()}
            > 
                Open sheet!
            </Button>
            
            <BottomSheet
                disclosure={disclosure}
                title="I'm a bottom sheet!"
            >
                // Sheet content...
            </BottomSheet>
        </>
    )
}

Props

Extends GenericSheetProps.

Property	Type	Description
releaseOffset	number	The offset the sheet must be from its original position before it will close. Defaults to 50% of the viewport height.
releaseVelocity	number	The velocity the sheet must be moving at before it will close. Defaults to 500.
allowInnerScrolling	boolean	Whether to allow the sheet to scroll its inner content. Defaults to false.
innerFlexProps	FlexProps	Optional props to apply to the inner flex component.

---

Changelog

• 3.3.0: now imports from @valence-ui/core.

• 2.2.0: fixed bugs with scrollable content; added innerFlexProps and allowInnerScrolling props.