useViewTransitionState

Framework Data

Summary

Reference Documentation ↗

Deprecated. Use React's <ViewTransition> component to style transitions instead. This hook only tracks React Router's legacy view transitions, not transitions started by React. See the migration guide.

This hook returns true when there is an active View Transition and the specified location matches either side of the navigation (the URL you are navigating to or the URL you are navigating from). This can be used to apply finer-grained styles to elements to further customize the view transition. This requires that view transitions have been enabled for the given navigation via LinkProps.viewTransition (or the Form, submit, or navigate call)

Signature

function useViewTransitionState(
  to: To,
  {
    relative,
  }: {
    relative?: RelativeRoutingType;
  } = {},
)

Params

to

The To location to compare against the active transition's current and next URLs.

options.relative

The relative routing type to use when resolving the to location, defaults to "route". See RelativeRoutingType for more details.

Returns

true if there is an active View Transition and the resolved path matches the transition's destination or source pathname, otherwise false.