Dynamic Sheet

Last updated: 3.0.0 (04/07/2024)

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

The Dynamic Sheet is a powerful responsive component that can be used to choose the best sheet for the breakpoint context. It can be used to switch between the Side Sheet and Bottom Sheet as required, utilizing ideal UI patterns for the breakpoint on which your app is running.

Usage

import { DynamicSheet, useDisclosure, Button } from "@valence-ui/app";

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

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

Changing the sheet type

By default, the Dynamic Sheet will be an inline Side Sheet, then change to an overlay Side Sheet on "tablet" breakpoints and a Bottom Sheet on "mobile" breakpoints. This behavior can be overridden with the type prop.

import { DynamicSheet, useDisclosure, Button } from "@valence-ui/app";

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

    return ( 
        <>
            <Button
                onClick={() => disclosure.open()}
            > 
                Open sheet!
            </Button>
            
            <DynamicSheet
                disclosure={disclosure}
                title="I'm a dynamic sheet!"
                type={{
                    desktopLarge: "inline",
                    default: "overlay",
                    mobile: "bottom",
                }}
            >
                // Sheet content...
            </DynamicSheet>
        </>
    )
}

---

Props

Property	Type	Description
children (required)	ReactNode
disclosure (required)	Disclosure	A disclosure to handle the sheet's state.
title (required)	string	The title of the sheet.
type	DynamicSheetType	The type of the sheet.
sideSheetProps	SideSheetProps	Optional props to apply to the Side Sheet component, when displayed.
bottomSheetProps	BottomSheetProps	Optional props to apply to the Bottom Sheet component, when displayed.

DynamicSheetType

export type DynamicSheetType = SideSheetDisplay | "bottom";

---

Changelog

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