RootElementProvider.tsx

import { createContext } from "react";
import { useSafeContext } from "hooks/useSafeContext";

type RootElem = React.RefObject<HTMLElement>;

const RootElementContext = createContext<RootElem | undefined>(undefined);

RootElementContext.displayName = "RootElementContext";

type RootElementProviderProps = {
  children: React.ReactNode;
  root: RootElem;
};

/**
 * Pass down and access the root element *ref* far down in your
 * component tree.
 * @param root The root element *ref*.
 * @example
 * ```tsx
 * const ref = useRef<React.ElementRef<"header">>(null);
 * return (
 *   <header ref={ref}>
 *     <RootRefProvider root={ref}>
 *       ...
 *     </RootRefProvider>
 *   </header>
 * );
 *
 * // Access the root element *ref* in a child component.
 * const rootElemRef = useRootElement();
 * rootElemRef.current?.focus();
 * ```
 */
const RootElementProvider = ({ root, children }: RootElementProviderProps) => {
  return (
    <RootElementContext.Provider value={root}>
      {children}
    </RootElementContext.Provider>
  );
};

/**
 * Access the root element *ref* of the navigation.
 * @example
 * ```tsx
 * const rootElemRef = useRootElementRef();
 * rootElemRef.current?.focus();
 *```
 */
export const useRootElementRef = () => {
  return useSafeContext(RootElementContext);
};

export default RootElementProvider;