DOCSEARCHbyAlgolia
Submit Docs

next-view-transitions

repository·main·Indexed 25 days ago

https://github.com/shuding/next-view-transitions

A library that enables the browser's View Transitions API within the Next.js App Router for smooth page navigations. It provides a <ViewTransitions> provider, a custom <Link> component, and the useTransitionRouter hook for programmatic navigation that supports TransitionOptions and falls back to standard Next.js navigation in unsupported browsers.

Tokens
1.3K
Snippets
6
Records
11
Agent score
80%

What's inside next-view-transitions

  2. Set up View Transitions in Next.js App Router

    main

    To enable View Transitions in your application, wrap your root content with the <ViewTransitions> component inside your top-level layout file.

    import { ViewTransitions } from 'next-view-transitions'

export default function Layout({ children }) {
  return (
    <ViewTransitions>
      <html lang='en'>
        <body>
          {children}
        </body>
      </html>
    </ViewTransitions>
  )
}

  3. Use the Link component for view transitions

    main

    Replace standard Next.js links with the <Link> component from next-view-transitions to trigger a view transition when a user clicks a link.

    import { Link } from 'next-view-transitions'

export default function Component() {
  return (
    <div>
      <Link href='/about'>Go to /about</Link>
    </div>
  )
}

  4. Use useTransitionRouter for programmatic navigation

    main

    For programmatic navigation that triggers a view transition, use the useTransitionRouter hook. This hook provides a router object that supports all standard Next.js router methods (e.g., .push()).

    import { useTransitionRouter } from 'next-view-transitions'

export default function Component() {
  const router = useTransitionRouter()

  return (
    <div>
      <button onClick={() => {
        // All Next.js router methods are supported
        router.push('/about')
      }}>Go to /about</button>
    </div>
  )
}

  6. Use useTransitionRouter for programmatic navigation with View Transitions

    main

    The useTransitionRouter hook provides a replacement for Next.js's useRouter that enables the browser's View Transition API during programmatic navigation.

    It returns a TransitionRouter object which extends the standard Next.js AppRouterInstance. This allows you to use push and replace methods that automatically wrap the navigation in a document.startViewTransition call if the browser supports it. If the browser does not support View Transitions, it falls back to standard Next.js navigation.

    Both push and replace accept an optional onTransitionReady callback that is triggered when the transition is ready to proceed.

  8. TransitionRouter type definition

    main

    The TransitionRouter type is an extension of Next.js's AppRouterInstance. It includes all standard router methods but overrides push and replace to support TransitionOptions.

    export type TransitionRouter = AppRouterInstance & {
  push: (href: string, options?: NavigateOptionsWithTransition) => void;
  replace: (href: string, options?: NavigateOptionsWithTransition) => void;
};

  10. Use useSetFinishViewTransition to control transition completion

    main

    The useSetFinishViewTransition hook allows you to manually trigger the completion of a view transition. It returns a state dispatcher (Dispatch<SetStateAction<(() => void) | null>>) that you can call to signal that the transition should finish.

    Note: This hook must be used within a component that is a child of the ViewTransitions provider. If used outside, it will throw an error: useSetFinishViewTransition must be used within a ViewTransitions component.

  11. Use the useTransitionRouter hook for programmatic navigation

    main
    The useTransitionRouter hook provides a router instance that supports view transitions for programmatic navigation. Use this instead of the standard useRouter from next/navigation when you want to trigger a view transition via code.