scrollToLocation.js

const scrollToLocation = () => {
  const scrolledRef = React.useRef(false);
  const { hash } = useLocation();
  React.useEffect(() => {
    if (hash && !scrolledRef.current) {
      const id = hash.replace('#', '');
      const element = document.getElementById(id);
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
        scrolledRef.current = true;
      }
    }
  });
};

The problem: I would like to scroll to a div identified by the hash in a URL. React router won't do it because the div is not created until after the page loads, the UI makes an API request for a list of 'cards', then the cards are rendered.

Some prior art here. Here is the code snippet, note that this person is just checking for the rendered div over and over until it is found, a set number of times.

In my solution above, my idea is that I check every time the component is rendered if there is a hash in the location. Once the element is finally found, I update scrolledRef, the idea being that I only scroll to the now-rendered div once.

Yep that is how I would do it.

The only thing would be if you want changes in the hash to trigger the scroll again

Updated to support scrolling again when the hash updates:

const useScrollToLocation = () => {
  const scrolledRef = React.useRef(false);
  const { hash } = useLocation();
  const hashRef = React.useRef(hash);

  React.useEffect(() => {
    if (hash) {
      // We want to reset if the hash has changed
      if (hashRef.current !== hash) {
        hashRef.current = hash;
        scrolledRef.current = false;
      }

      // only attempt to scroll if we haven't yet (this could have just reset above if hash changed)
      if (!scrolledRef.current) {
        const id = hash.replace('#', '');
        const element = document.getElementById(id);
        if (element) {
          element.scrollIntoView({ behavior: 'smooth' });
          scrolledRef.current = true;
        }
      }
    }
  });
};

hi, how can I adapt this to work with Next-js? need to use it with intersection observer