useHash

The useHash hook provides access to the current URL hash fragment (the part after #). It returns a string containing the hash value, including the # symbol when present.

Usage

import { useHash } from "@toapi/router";

function TableOfContents() {
  const hash = useHash();

  return (
    <nav>
      <a
        href="#introduction"
        className={hash === "#introduction" ? "active" : ""}
      >
        Introduction
      </a>
      <a href="#features" className={hash === "#features" ? "active" : ""}>
        Features
      </a>
    </nav>
  );
}

Return Value

• Type: string
• Description: the current hash fragment, including the leading #. Empty string ("") when there is no hash.

Example: Tab Navigation

import { useHash } from "@toapi/router";

function Tabs() {
  const hash = useHash();
  const activeTab = hash.slice(1) || "overview";

  return (
    <div>
      <nav>
        <a href="#overview">Overview</a>
        <a href="#activity">Activity</a>
        <a href="#settings">Settings</a>
      </nav>

      {activeTab === "overview" && <Overview />}
      {activeTab === "activity" && <Activity />}
      {activeTab === "settings" && <Settings />}
    </div>
  );
}

Related

• usePathname — access the current pathname
• useSearchParams — access search parameters
• useRouter — programmatic navigation