API Reference
Props
| Name | Type | Default | Description |
|---|---|---|---|
children? | ReactNode | undefined | Sheet's content. |
className? | string | '' | Additional class names that will be applied to the sheet. |
detents? | Array<string | number> | ["50%", "97%"] | 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%"] |
expansionSwitchThreshold? | number | 50 | Amount of pixels that sheet should be dragged before switching expanded state. |
grabberVisible? | boolean | false | A Boolean value that determines whether the sheet shows a grabber at the top. |
largestUndimmedDetentIndex? | number | -1 | The largest detent's index that doesn’t dim the view underneath the sheet. Default value is -1 which means that dim is always enabled. |
permanent? | boolean | false | Controls whether sheet persists on page or not. |
domNode? | Element | DocumentFragment | false | Custom DOM node to render bottom sheet into. Passed directly to createPortal. |
standalone? | boolean | false | Renders component without a portal. By default, bottom sheet is rendered inside a portal, thus only on client side in SSR/SSG environments (because React's createPortal cannot be called server-side).If you want to heavily customize rendering behaviour, like allowing it to bypass mentioned limitation, you can pass this prop. |
ref.current Object Properties
| Name | Type | Description |
|---|---|---|
close | () => void | Closes sheet |
collapse | () => void | Collapses sheet one detent down |
expand | () => void | Expands sheet one detent up |
expandToIndex | (i: number) => void | Expands sheet to specific detent by it's index |
open | () => void | Opens sheet |
scrollContainer | HTMLDivElement | null | Reference to the DOM node which holds sheet's children |