Customizing Behavior

This section outlines how to customize the behavior of the bottom sheet, including options for mounting, closing, positioning, and dragging.

Mounting

• mountingPointRef: MutableRefObject<HTMLElement|undefined>
  Mounts the bottom sheet to the DOM or to a provided mounting point. If no mounting point is specified, it defaults to mounting the bottom sheet to the body.

Closing

• shouldCloseOnOutsideClick?: boolean
  Optional. Determines if the bottom sheet should close when clicking outside of it.

Positioning

• defaultPosition?: BottomSheetPosition
  Optional. The initial position where the bottom sheet should appear.

Dragging

• snapPoints?: number[]
  Optional. [0.3, 0.8] will make the bottom sheet stop at 30% and 80% of the screen height, from the top.

• draggable?: boolean
  Optional. If true, the bottom sheet can be dragged. Defaults to true.

• preventClosing?: boolean
  Optional. If true, the bottom sheet cannot be dragged down below its content height. Defaults to false.

• expandable?: boolean
  Optional. If true, the bottom sheet can be dragged up above its content height. Defaults to true.

• backgroundDraggable?: boolean
  Optional. If true, the content’s background can be dragged. Defaults to true.

• dragTriggers?: string[]
  Optional. Element selectors that will trigger dragging of the bottom sheet.