nextjs13-router-events/dist/context/RouteChangeProvider.js

Provides NextJS 13 router events compatible with the App Router

import { usePathname, useSearchParams } from 'next/navigation';
import React, { createContext, useContext, useState, useCallback, Suspense, useEffect } from 'react';
/** Logic */
var RouteChangeContext = createContext({});
export var useRouteChangeContext = function () { return useContext(RouteChangeContext); };
function RouteChangeComplete() {
    var onRouteChangeComplete = useRouteChangeContext().onRouteChangeComplete;
    var pathname = usePathname();
    var searchParams = useSearchParams();
    useEffect(function () { return onRouteChangeComplete(); }, [pathname, searchParams]);
    return null;
}
export var RouteChangeProvider = function (_a) {
    var children = _a.children;
    var _b = useState([]), routeChangeStartCallbacks = _b[0], setRouteChangeStartCallbacks = _b[1];
    var _c = useState([]), routeChangeCompleteCallbacks = _c[0], setRouteChangeCompleteCallbacks = _c[1];
    var onRouteChangeStart = useCallback(function () {
        routeChangeStartCallbacks.forEach(function (callback) { return callback(); });
    }, [routeChangeStartCallbacks]);
    var onRouteChangeComplete = useCallback(function () {
        routeChangeCompleteCallbacks.forEach(function (callback) { return callback(); });
    }, [routeChangeCompleteCallbacks]);
    return (React.createElement(RouteChangeContext.Provider, { value: {
            routeChangeStartCallbacks: routeChangeStartCallbacks,
            routeChangeCompleteCallbacks: routeChangeCompleteCallbacks,
            onRouteChangeStart: onRouteChangeStart,
            onRouteChangeComplete: onRouteChangeComplete
        } },
        children,
        React.createElement(Suspense, null,
            React.createElement(RouteChangeComplete, null))));
};