@react-hookz/web/esnext/useDocumentTitle/useDocumentTitle.js

React hooks done right, for browser and SSR.

import { useEffect, useRef } from 'react';
import { isBrowser } from "../util/const.js";
import { useUnmountEffect, useSyncedRef } from '..';
/**
 * Sets title of the page.
 *
 * @param title Title to set, if wrapper option is set, it will be passed through wrapper function.
 * @param options Options object.
 */
export function useDocumentTitle(title, options = {}) {
    const titleRef = useRef(isBrowser ? document.title : '');
    const optionsRef = useSyncedRef(options);
    // it is safe not to check isBrowser here, as effects are not invoked in SSR
    useEffect(() => {
        document.title = options.wrapper ? options.wrapper(title) : title;
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [title, options.wrapper]);
    useUnmountEffect(() => {
        if (optionsRef.current.restoreOnUnmount) {
            document.title = titleRef.current;
        }
    });
}