Skip to content
React Spring Bottom Sheet
PrimitivesNIPE Open Source
Browse documentation
On this page

docs / snap-points

Snap points

Name every destination and express its height clearly.

Values

Every destination has a stable id. Its value can be a pixel number, a px string, a percentage of the viewport, or content for measured content height.

const snapPoints = [
  { id: 'compact', value: '35%' },
  { id: 'expanded', value: '82%' },
] as const

Prefer names such as compact, expanded, or content over numeric names. The ID is application state; the value is a layout decision.

Reconciliation

Destinations resolve again when content, the viewport, or the visual viewport changes. If the active destination disappears, the nearest valid destination is selected.

See content height update live