Skip to main content

New: useHold hook and Drawer isExiting for content that survives the exit animation

Drawer callsites that clear their selected value on close (e.g. isOpen={Boolean(selectedRow)}) used to hand-roll a useRef/useState "last non-null value" snapshot just to keep the panel's content visible through the ~400ms exit slide — otherwise it blanked instantly. @trackunit/react-components and @trackunit/react-drawer now ship a shared primitive for this.

New: useHold hook​

useHold<T>(value: T, isExiting: boolean): T, exported from @trackunit/react-components. It freezes value at its last snapshot while isExiting is true, and releases it back to the live value the instant isExiting flips to false. It's a standalone, overlay-agnostic hook — no dependency on Drawer, Sheet, or Modal.

import { useHold } from "@trackunit/react-components";

const heldRow = useHold(selectedRow, drawer.isExiting);

New: isExiting on useDrawer​

useDrawer()'s return value gains isExiting: boolean — true from the moment a close is committed until the exit animation genuinely completes, derived from Drawer's existing internal exit-complete signal. Feed it straight into useHold:

import { Drawer, useDrawer } from "@trackunit/react-drawer";
import { useHold } from "@trackunit/react-components";

const drawer = useDrawer({ isOpen: selectedRow != null });
const heldRow = useHold(selectedRow, drawer.isExiting);

<Drawer {...drawer} ariaLabel="Details">
  {heldRow && <DetailsBody row={heldRow} />}
</Drawer>;

Closing the drawer now plays its full exit slide with the last-selected content still visible, instead of blanking as soon as the selection clears.

Where to look​

  • libs/react/drawer/README.md's "Surviving the exit animation" section documents this as the recommended pattern for Pattern B/C drawer callers.
  • Storybook: useHold's own docs/stories in @trackunit/react-components, and a HoldDuringExit story on Drawer.