31 lines
1 KiB
JavaScript
31 lines
1 KiB
JavaScript
import { useEffect } from 'preact/hooks';
|
|
import { matchPath } from 'react-router-dom';
|
|
import { useSnapshot } from 'valtio';
|
|
|
|
import states from './states';
|
|
|
|
const { VITE_CLIENT_NAME: CLIENT_NAME } = import.meta.env;
|
|
|
|
export default function useTitle(title, path) {
|
|
const snapStates = useSnapshot(states);
|
|
const { currentLocation } = snapStates;
|
|
let paths = [];
|
|
// Workaround for matchPath not working for optional path segments
|
|
// https://github.com/remix-run/react-router/discussions/9862
|
|
if (/:?\w+\?/.test(path)) {
|
|
paths.push(path.replace(/(:\w+)\?/g, '$1'));
|
|
paths.push(path.replace(/\/?:\w+\?/g, ''));
|
|
}
|
|
let matched = false;
|
|
if (paths.length) {
|
|
matched = paths.some((p) => matchPath(p, currentLocation));
|
|
} else if (path) {
|
|
matched = matchPath(path, currentLocation);
|
|
}
|
|
console.debug({ paths, matched, currentLocation });
|
|
useEffect(() => {
|
|
if (path && !matched) return;
|
|
document.title = title ? `${title} / ${CLIENT_NAME}` : CLIENT_NAME;
|
|
}, [title, snapStates.currentLocation]);
|
|
}
|