MultiHash

MultiHash

Summary

Component that pairs hashes with refs and scrolls to a corresponding ref when one of the hashes is present in the url

Demo

Props

hashes

• Required
• An object specifying the hashes and the refs or refs with options (behavior, position, requiredPathname, scrollFunc) they correspond to
• Hashes can include or exclude leading "#"

behavior

• Applies to all hashes unless overridden by a ref with options

position

• Applies to all hashes unless overridden by a ref with options

requiredPathname

• Applies to all hashes unless overridden by a ref with options

scrollFunc

• Applies to all hashes unless overridden by a ref with options

Example

import React from "react";
import { BrowserRouter } from "react-router-dom"; //Can use HashRouter or MemoryRouter as well
import { MultiHash } from "react-hash-scroll";

const App = () => {
  const ref1 = React.createRef();
  const ref2 = React.createRef();
  const ref3 = React.createRef();

  return (
    <BrowserRouter>
      <MultiHash
        hashes={{
          "#div": ref1,
          "#heading": [ref2, { behavior: "smooth" }],
          "#paragraph": [
            ref3,
            { position: "start", requiredPathname: ["/docs", "/contact"] },
          ],
        }}
        requiredPathname="/docs"
      />
      <div ref={ref1}>Element #1</div>
      <h4 ref={ref2}>Element #2</h4>
      <p ref={ref3}>Element #3</p>
    </BrowserRouter>
  );
};