We're excited to release experimental support for the the View Transitions API in Remix! You can now trigger navigational DOM updates to be wrapped in document.startViewTransition to enable CSS animated transitions on SPA navigations in your application.

The simplest approach to enabling a View Transition in your Remix app is via the new <Link unstable_viewTransition> prop. This will cause the navigation DOM update to be wrapped in document.startViewTransition which will enable transitions for the DOM update. Without any additional CSS styles, you'll get a basic cross-fade animation for your page.

If you need to apply more fine-grained styles for your animations, you can leverage the unstable_useViewTransitionState hook which will tell you when a transition is in progress and you can use that to apply classes or styles:

function ImageLink(to, src, alt) {
  const isTransitioning = unstable_useViewTransitionState(to);
  return (
    <Link to={to} unstable_viewTransition>
      <img
        src={src}
        alt={alt}
        style={{
          viewTransitionName: isTransitioning ? "image-expand" : "",
        }}
      />
    </Link>
  );
}

You can also use the <NavLink unstable_viewTransition> shorthand which will manage the hook usage for you and automatically add a transitioning class to the <a> during the transition:

a.transitioning img {
  view-transition-name: "image-expand";
}

<NavLink to={to} unstable_viewTransition>
  <img src={src} alt={alt} />
</NavLink>

For an example usage of View Transitions, check out our fork of the Astro Records demo (which uses React Router but so does Remix 😉).

For more information on using the View Transitions API, please refer to the Smooth and simple transitions with the View Transitions API guide from the Google Chrome team.

Stable `createRemixStub`

After real-world experience, we're confident in the createRemixStub API and ready to commit to it, so in 2.1.0 we've removed the unstable_ prefix.

⚠️ Please note that this did involve 1 small breaking change - the <RemixStub remixConfigFuture> prop has been renamed to <RemixStub future> to decouple the future prop from a specific file location.

Minor Changes

Added unstable support for the View Transition API (#10916)
Stabilized the @remix-run/testing createRemixStub helper (#7647)

Patch Changes

Emulate types for JSON.parse(JSON.stringify(x)) in SerializeFrom (#7605)
- Notably, type fields that are only assignable to undefined after serialization are now omitted since JSON.stringify |> JSON.parse will omit them. See test cases for examples
- This fixes type errors when upgrading to v2 from 1.19
Avoid mutating meta object when tagName is specified (#7594)
Fix FOUC on subsequent client-side navigations to route.lazy routes (#7576)
Export the proper Remix useMatches wrapper to fix UIMatch typings (#7551)
@remix-run/cloudflare - sourcemap takes into account special chars in output file (#7574)
@remix-run/express - Flush headers for text/event-stream responses (#7619)

Updated Dependencies

Changes by Package

Full Changelog: v2.0.1...v2.1.0

FAQs

What is @vercel/remix?

Is @vercel/remix popular?

Is @vercel/remix well maintained?

Package last updated on 18 Oct 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install