docs/contexts/RouterContext.tsx

"use client";

import { usePathname } from "next/navigation";
import {
    Dispatch,
    PropsWithChildren,
    SetStateAction,
    createContext,
    useContext,
    useEffect,
    useState,
} from "react";

type RouterContextData = {
    isChanging: boolean;
    setIsChanging: Dispatch<SetStateAction<boolean>>;
};

const RouterContext = createContext<RouterContextData>({} as RouterContextData);

export function useRouterContext() {
    return useContext(RouterContext);
}

export function RouterContextProvider({ children }: PropsWithChildren) {
    const [isChanging, setIsChanging] = useState(false);
    const pathname = usePathname();

    useEffect(() => setIsChanging(false), [pathname]);

    return (
        <RouterContext.Provider value={{ isChanging, setIsChanging }}>
            {children}
        </RouterContext.Provider>
    );
}
1	"use client";
2
3	import { usePathname } from "next/navigation";
4	import {
5	Dispatch,
6	PropsWithChildren,
7	SetStateAction,
8	createContext,
9	useContext,
10	useEffect,
11	useState,
12	} from "react";
13
14	type RouterContextData = {
15	isChanging: boolean;
16	setIsChanging: Dispatch<SetStateAction<boolean>>;
17	};
18
19	const RouterContext = createContext<RouterContextData>({} as RouterContextData);
20
21	export function useRouterContext() {
22	return useContext(RouterContext);
23	}
24
25	export function RouterContextProvider({ children }: PropsWithChildren) {
26	const [isChanging, setIsChanging] = useState(false);
27	const pathname = usePathname();
28
29	useEffect(() => setIsChanging(false), [pathname]);
30
31	return (
32	<RouterContext.Provider value={{ isChanging, setIsChanging }}>
33	{children}
34	</RouterContext.Provider>
35	);
36	}