Open GalvinGao opened 2 months ago
Hi, that is a really nice suggestion. Looks like RR calls startViewTransition
under the hood, and I doubt we can fully recreate this API for the sake of size. However, I think we can provide a way for users to control how they want transition to be executed. Here is how I see the API:
// top-level component
const router = useRouter()
router.on("navigate", (options) => {
// `options` here is what passed as navigations options to Link or when `setLocation` is called
if (options.viewTransition) {
startViewTransition(...)
}
})
<Link href="/" viewTransition />
The idea is the provide a global hook that you can subscribe to when the navigation happens. This approach is similar to https://github.com/Charca/view-transitions-live/blob/0c5125f198b1e08963fe2b2ca5a10d06b2534df3/src/scripts/navigation.js#L11
Also, having this hook will potentially allow us to solve https://github.com/molefrog/wouter/issues/300 (though, additional research is needed)
The View Transitions API is currently experimental but has received some adoptions already. As soon as I discovered
wouter
I immediately fall in love with its simplicity design. No offenses, but complications aroundreact-router-dom
has drove me crazy and I just don't need all theloader
abilities in my simple SPA. (sorry for going too far on this...)However it seems that
wouter
hasn't support the View Transitions API yet.react-router-dom
supported this under aunstable_viewTransition
prop on<Link />
which I think is a pretty nice trade-off. Willwouter
consider adding this prop to the<Link />
component?