import React, { useRef, useContext } from "react";

const scrollerRefContext = React.createContext<{
  current: HTMLDivElement | null;
}>({ current: null });

// This provides access to the scrolling container element
export const useScrollerRef = () => useContext(scrollerRefContext);

export const ScrollerRefProvider: React.FC = ({ children }) => {
  const scrollerRef = useRef<HTMLDivElement | null>(null);
  return (
    <scrollerRefContext.Provider value={scrollerRef}>
      {children}
    </scrollerRefContext.Provider>
  );
};