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.