molefrog/wouter v3.9.0

View Transitions

on GitHub

wouter just crossed 3M downloads/month! To celebrate, this release adds support for the View Transitions API.

How to enable View Transitions

Since view transitions require synchronous DOM rendering and must be wrapped in flushSync from react-dom (wouter doesn't depend on it), you will have you manually enable this with just a few lines of code.

To enable view transitions, use the new aroundNav callback on the Router component:

import { flushSync } from "react-dom";
import { Router, type AroundNavHandler } from "wouter";

const aroundNav: AroundNavHandler = (navigate, to, options) => {
  if (!document.startViewTransition) {
    // check if supported
    navigate(to, options);
    return;
  }

  document.startViewTransition(() => {
    flushSync(() => {
      navigate(to, options);
    });
  });
};

const App = () => (
  <Router aroundNav={aroundNav}>
    {/* Your routes */}
  </Router>
);

You can also enable transitions selectively using the transition prop:

<Link href="/products/123" transition>View Product</Link>

See the https://github.com/molefrog/wouter#how-do-i-use-wouter-with-view-transitions-api for more details.

Magazin Example

We're also releasing Magazin, a modern e-commerce demo showcasing wouter with:

• Server-side rendering with Bun
• View Transitions
• React 19 support
• Full TypeScript
• Redirects, 404 pages, search parameters, state and more wouter features used

Check it out in packages/magazin/ - it's a (fake!) merch store featuring hand-crafted React pendants, exclusive jewelry by Rick Woens, carabiners, and more.

Changes and fixes from v3.8.0

• resolve SSR hydration mismatch when ssrPath/ssrSearch not provided #549
• support data: protocol in navigate #534 by @5unnyWind
• tests are completely migrated to Bun #546
• numerous type and docs fixes