58 lines
1.4 KiB
TypeScript
58 lines
1.4 KiB
TypeScript
import { useCallback, useEffect } from 'react';
|
|
import { useLocation, useNavigate, NavigateOptions } from 'react-router-dom';
|
|
import { supportsViewTransitions, withViewTransition } from '../utils/viewTransitions';
|
|
|
|
export const useViewTransitions = () => {
|
|
const location = useLocation();
|
|
|
|
useEffect(() => {
|
|
if (!supportsViewTransitions()) {
|
|
return;
|
|
}
|
|
|
|
document.documentElement.classList.add('view-transitions-enabled');
|
|
|
|
return () => {
|
|
document.documentElement.classList.remove('view-transitions-enabled');
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
// Route changed
|
|
}, [location]);
|
|
|
|
return {
|
|
supportsViewTransitions: supportsViewTransitions(),
|
|
};
|
|
};
|
|
|
|
/**
|
|
* Navigate helper. On Capacitor / coarse-pointer, View Transitions are disabled
|
|
* so DM ↔ space switches cannot leave a stuck hit-blocking overlay.
|
|
*/
|
|
export const useNavigateWithTransition = () => {
|
|
const navigate = useNavigate();
|
|
|
|
return useCallback(
|
|
(to: string | number, options?: NavigateOptions) => {
|
|
if (!supportsViewTransitions()) {
|
|
if (typeof to === 'number') {
|
|
navigate(to);
|
|
} else {
|
|
navigate(to, options);
|
|
}
|
|
return;
|
|
}
|
|
|
|
withViewTransition(() => {
|
|
if (typeof to === 'number') {
|
|
navigate(to);
|
|
} else {
|
|
navigate(to, options);
|
|
}
|
|
});
|
|
},
|
|
[navigate]
|
|
);
|
|
};
|