How to load a #hash fragment to an anchor name in react (especially in first loading)

Alejandro Martinez — Fri, 08 Oct 2021 20:15:19 +0000

How to implement URL hashes and scroll down to anchor name in react in the initial loading?

A hash fragment in the URL (i.e. www.mypage.com/article#fragment) to the anchor name is the value of either the name or id attribute when used in the context of anchors.

According to w3.org, it must observe two rules, Uniqueness: is said must be unique within a document, and String matching: Comparisons between fragment identifiers and anchor names must be done by exact (case-sensitive) match.

The id attribute may be used to create an anchor at the start tag of any element.

This example illustrates the use of the id attribute to position an anchor in an H2 element.



...later in the document
<H2 id="section2">Section Two</H2>
...

In a simple HTML document it works on the loading perfectly since all the DOM are rendered on the browser, but normally in the first loading page in react we have just one div



...
<div id="root"></div>
...

And if you try to access a section via #hash fragment (i.e. www.mypage.com/article#fragment) do not scroll to the desired section.

This behavior occurs for several reasons, one reason is because the anchor name offset is executed after the page loads the first DOM, and react does not yet inject the virtual DOM into the real DOM. Another reason is because the offset occurs before fetching the page content from an external API and has not yet loaded the components into the page (or using a skeleton load).

The solution to this problem is to make a manual process of the scroll obtaining the hash of the URL through the window.location and the eventListener 'hashchange' in case we want to keep the same behavior once the whole page has been loaded from the React components. Let's see the following hook that implements all this:



import { useEffect } from "react";

export function useHashFragment(offset = 0, trigger = true) {
  useEffect(() => {
    const scrollToHashElement = () => {
      const { hash } = window.location;
      const elementToScroll = document.getElementById(hash?.replace("#", ""));

      if (!elementToScroll) return;

      window.scrollTo({
        top: elementToScroll.offsetTop - offset,
        behavior: "smooth"
      });
    };

    if (!trigger) return;

    scrollToHashElement();
    window.addEventListener("hashchange", scrollToHashElement);
    return window.removeEventListener("hashchange", scrollToHashElement);
  }, [trigger]);
}

The first param offset if we have a sticky menu on the top of the page, the second one is a trigger to determine when to execute the scroll down to the #hash fragment.

Without Images

If the document doesn't have any image that have to fetch for external link, you can use it like this:



import { useHashFragment } from "./hooks/useHashFragment";
import "./styles.css";

export default function App() {
  const sectionArrary = [1, 2, 3, 4, 5];
  useHashFragment();

  const handleOnClick = (hash: string) => {
    navigator.clipboard
      .writeText(`${window.location.origin}${window.location.pathname}#${hash}`)
      .then(() => {
        alert(
          `Link: ${window.location.origin}${window.location.pathname}#${hash}`
        );
      });
  };

  return (
    <div className="App">
      <h1>How to implement URL hashes and deep-link in react</h1>
      {sectionArrary.map((item) => (
        <section id={`section${item}`}>
          <h2>
            Title Section {item}{" "}
            <button onClick={() => handleOnClick(`section${item}`)}>
              copy link
            </button>
          </h2>
          <p>
            Lorem ipsum ...
          </p>
        </section>
      ))}
    </div>
  );
}

Addional the handleOnClick catch the #hash-fragment from window.location of the anchor name/id defined in <section id="section3"> with the navigation.clipboard.writeText promise:



 const handleOnClick = (hash: string) => {
    navigator.clipboard
      .writeText(`${window.location.origin}${window.location.pathname}#${hash}`)
      .then(() => {
        alert(
          `Link: ${window.location.origin}${window.location.pathname}#${hash}`
        );
      });
  };

Here you can check the demo whithout images.

With Images

One thing that can happen if we have <img/> tags with an external link, when scrolling to the named anchor before all the images are loaded, is that the scrolling fails because the size of the document is modified by the loaded images.

You can complement it with another hook about loading images hook and fix this problem.

If you like the article follow me in:

How to detect images loaded in React

Alejandro Martinez — Tue, 05 Oct 2021 03:15:20 +0000

When I performed a manual deep linking hook in a web application, the automatically scrolling down to a specific section caused a delay by loading of images.

How to detect the loading issues of the images before executing any action in react? The next hook uses eventListener with load and errorevents, and detects the HTMLImageElement.complete property of javascript, to determine if all images in a specific wrapper element have been completed.

import { useState, useEffect, RefObject } from "react";

export const useOnLoadImages = (ref: RefObject<HTMLElement>) => {
  const [status, setStatus] = useState(false);

  useEffect(() => {
    const updateStatus = (images: HTMLImageElement[]) => {
      setStatus(
        images.map((image) => image.complete).every((item) => item === true)
      );
    };

    if (!ref?.current) return;

    const imagesLoaded = Array.from(ref.current.querySelectorAll("img"));

    if (imagesLoaded.length === 0) {
      setStatus(true);
      return;
    }

    imagesLoaded.forEach((image) => {
      image.addEventListener("load", () => updateStatus(imagesLoaded), {
        once: true
      });
      image.addEventListener("error", () => updateStatus(imagesLoaded), {
        once: true
      });
    });

    return;
  }, [ref]);

  return status;
};

Note: is important to add both load and error to avoid any blocking after load page.

According with the documentation of complete prop, the image is considered completely loaded if any of the following are true:

Neither the src nor the srcset attribute is specified. The srcset attribute is absent and the src attribute, while specified, is the empty string ("").
The image resource has been fully fetched and has been queued for rendering/compositing.
The image element has previously determined that the image is fully available and ready for use.
The image is "broken;" that is, the image failed to load due to an error or because image loading is disabled.

To use it you have to pass a ref wrapper to limit the search images.

import { useRef } from "react";
import { useOnLoadImages } from "./hooks/useOnLoadImages";
import "./styles.css";

export default function App() {
  const wrapperRef = useRef<HTMLDivElement>(null);
  const imagesLoaded = useOnLoadImages(wrapperRef);

  return (
    <div className="App" ref={wrapperRef}>
      <h2>How to detect images loaded in React</h2>
      <div>
        <p>{!imagesLoaded ? "Loading images..." : "Images loaded"}</p>
        <img src="https://source.unsplash.com/1600x900/?nature" alt="nature" />
        <img src="https://source.unsplash.com/1600x900/?water" alt="water" />
        <img src="https://source.unsplash.com/1600x900/?animal" alt="animal" />
        <img src="https://source.unsplash.com/1600x900/?lake" alt="lake" />
        <img src="https://source.unsplash.com/1600x900/?life" alt="life" />
      </div>
    </div>
  );
}

Here there are a demo Link (reload internal browser)

If you like the article follow me in:

DEV Community: Alejandro Martinez

How to load a #hash fragment to an anchor name in react (especially in first loading)

Without Images

With Images

How to detect images loaded in React