useUrlOpen

Use useUrlOpen for dialogs, sheets, alert dialogs, and popovers that should reflect URL state without storing open state internally.

The hook is route-agnostic and always serializes open-state values as strings.

Usage

import { useUrlOpen } from "@tilt-legal/cubitt-components/utilities/hooks";

export function Dialog() {
  const { isOpen, open, close } = useUrlOpen({
    paramName: "dialog",
  });

  return (
    <YourDialog
      open={isOpen}
      onOpenChange={(value) => (value ? void open() : void close())}
    />
  );
}

Router registration

When your app registers its TanStack Router, paramName narrows to known search keys from the route tree. Without registration, it falls back to loose string typing but still works at runtime.

API