Sheet@knitui/sheet
Sheet
import { Sheet } from "@knitui/sheet";Playground
Loading playground…
<Sheet />Examples
Default
The default two-snap sheet ([80, 10]) with a handle.
Loading example…
Snap Points
Three snap points; dismissible by flinging past the lowest.
Loading example…
Custom Handle
A custom handle via the Sheet.Handle marker.
Loading example…
With Scroll View
Scrollable content inside the panel via Sheet.ScrollView, exercising the scroll↔drag handoff (native): at the top snap the list scrolls; drag it back to the top and keep pulling down and the sheet takes over (collapses to 40 %, then dismisses). From the 40 % snap a drag moves the sheet, not the list.
Loading example…
With Header And Footer
A fixed header + footer via the Sheet.Header / Sheet.Footer markers. Both stay pinned (below the handle / above the bottom edge) while the Sheet.ScrollView between them scrolls independently — the scroll region is squeezed between the two fixed bars.
Loading example…
Sizes
Top-corner rounding scale.
Loading example…
Styles
Per-slot styles overrides (root / overlay / handle).
Loading example…
Controlled Only
Non-dismissible (no overlay press / snap-to-bottom); close via a button.
Loading example…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
animationConfig | SpringConfig | undefined | — | Per-instance spring override (passed to reanimated `withSpring`). |
children | ReactNode | — | `Sheet.Overlay` / `Sheet.Handle` / `Sheet.Header` / `Sheet.Footer` / `Sheet.Frame` markers, or plain content (which folds into the panel). |
closeOnEscape | boolean | undefined | true | Escape closes the sheet (web). |
defaultOpened | boolean | undefined | false | Uncontrolled initial open state on mount. |
defaultPosition | number | undefined | 0 (most open) | Uncontrolled initial snap-point index. |
disableDrag | boolean | undefined | false | Disable all drag handling. |
disableRemoveScroll | boolean | undefined | false | Opt out of locking body scroll while open (web). |
dismissOnOverlayPress | boolean | undefined | true | Tapping the scrim closes the sheet. |
dismissOnSnapToBottom | boolean | undefined | false | Dragging past the lowest snap closes the sheet. |
modal | boolean | undefined | true | Render into the app root (teleported) vs. inline. |
moveOnKeyboardChange | boolean | undefined | false | Lift the panel above the soft keyboard (native). |
onClose | (() => void) | undefined | — | Called whenever the sheet requests to close — overlay press, drag-to-dismiss, Escape, snap-to-bottom, or the imperative `close()`. Fires after the close animation in uncontrolled mode; immediately in controlled mode. |
onPositionChange | ((position: number) => void) | undefined | — | Called when the resting snap-point index changes. |
opened | boolean | undefined | — | Controlled open state. |
overlayProps | OverlayProps | undefined | — | Props forwarded to the underlying `Overlay` scrim. |
position | number | undefined | — | Controlled snap-point index (into `snapPoints`). |
returnFocus | boolean | undefined | true | Return focus to the previously-focused element on close (web). |
size system | SheetSize | undefined | "lg" | Top-corner rounding scale. |
snapPoints | number[] | undefined | [80, 10] | Snap points as % of the screen the sheet occupies, ordered most-visible → least-visible. |
style | Falsy | (ViewStyle | CSSProperties | (CSSProperties & ViewStyle)) | RegisteredStyle<ViewStyle | CSSProperties | (CSSProperties & ViewStyle)> | RecursiveArray<Falsy | (ViewStyle | CSSProperties | (CSSProperties & ViewStyle)) | RegisteredStyl… | — | Inline style on the panel surface. |
styles system | SlotStyles<SheetStyles> | undefined | — | Per-slot style overrides (`root` / `overlay` / `handle`). |
testID | string | undefined | — | — |
trapFocus | boolean | undefined | true | Trap keyboard focus within the panel while open (web). |
withHandle | boolean | undefined | true | Show the default drag handle when no `Sheet.Handle` is provided. |
withOverlay | boolean | undefined | true | Render the scrim behind the panel. |
zIndex | number | undefined | 200 | Root stack order. |
Style slots
Every part of Sheet can be styled through the styles prop. Explicit props on the component always win over slot styles.
| Slot | Targets |
|---|---|
footer | The fixed footer region (Sheet.Footer). |
handle | The drag handle bar (Sheet.Handle). |
header | The fixed header region (Sheet.Header). |
overlay | The scrim (Sheet.Overlay). |
root | The panel surface (Sheet.Frame). |
Accessibility & DOM props (2)
| Prop | Type |
|---|---|
key | Key | null | undefined |
ref | Ref<SheetRef> | undefined |