Subscribe to router’s global blocking state

Hey

Is there a way to subscribe to TanStack Router’s global blocking state?

Use-case
Root-level component that should pop up whenever any navigation is blocked anywhere in the app. Something like:

const Modal = () => {
  const { status, dismiss, reset } = useBlockerStatus(); // imaginary hook

  return status === 'blocking'
    ? <BlockingModal onDismiss={dismiss} onReset={reset} />
    : null;
};

const Modal = () => {
  const { status, dismiss, reset } = useBlockerStatus(); // imaginary hook

  return status === 'blocking'
    ? <BlockingModal onDismiss={dismiss} onReset={reset} />
    : null;
};

From the docs, useBlocker() seems scoped to its consuming route. What I’d like instead is a hook/event that tells a top-level component: “the router is blocking right now.”

Couldn’t find any 'blocking' property or similar state in the router history or internals
Seems like the history object only holds a 'block' method, but doesnt holds the blocking state
https://github.com/TanStack/router/blob/192ee6246cdbd3a38e2fd8969a7522bbda64c0d3/packages/history/src/index.ts#L35C1-L36C1

Does such a hook exist, or any recommended way to listen to this state?

Thanks!

GitHub

router/packages/history/src/index.ts at 192ee6246cdbd3a38e2fd8969a7...

Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - TanStack/router

router/packages/history/src/index.ts at 192ee6246cdbd3a38e2fd8969a7...

TanStack•10mo ago•

48 replies

wet-aqua

Subscribe to router’s global blocking state

Hey

Is there a way to subscribe to TanStack Router’s global blocking state?

Use-case
Root-level component that should pop up whenever any navigation is blocked anywhere in the app. Something like:

const Modal = () => {
  const { status, dismiss, reset } = useBlockerStatus(); // imaginary hook

  return status === 'blocking'
    ? <BlockingModal onDismiss={dismiss} onReset={reset} />
    : null;
};

const Modal = () => {
  const { status, dismiss, reset } = useBlockerStatus(); // imaginary hook

  return status === 'blocking'
    ? <BlockingModal onDismiss={dismiss} onReset={reset} />
    : null;
};

GitHub

router/packages/history/src/index.ts at 192ee6246cdbd3a38e2fd8969a7...

Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - TanStack/router

Subscribe to router’s global blocking state

Similar Threads

Subscribe to router’s global blocking state

Similar Threads

Similar Threads

Similar Threads