Skip to main content

Improved: useModal now supports sheet mode and container scoping

useModal in @trackunit/react-modal has been updated with sheet mode support and container scoping. Modals can now automatically adapt to a sheet presentation when rendered inside a narrow container.

Changes to useModal

New return values

NameTypeDescription
mode"card" | "sheet"Current presentation mode
dismissfunctionProgrammatically dismiss with options
onCloseCompletefunctionCallback fired after close animation finishes
containerelementThe scoping container element
stackarrayModal stack state

Removed return values

  • depthFromFront — removed
  • stackSizeAtOpen — removed

New prop: container

Pass a container element to useModal to scope the modal to that element. When the container's width is less than 480 px, the modal automatically switches to sheet mode.

Updated: ModalDismissOptions

ModalDismissOptions now extends the shared DismissOptions type from @trackunit/react-components, aligning dismiss behaviour across overlay components.