ChildrenHash

ChildrenHash

Summary

Scrolls to corresponding child element when one of the hashes is present in the url

Demo

Props

hashes

• Required
• Array of hashes or hashes with scroll options (behavior, position, requiredPathname, scrollFunc)
• Hashes can include or exclude leading "#"
• Length should be equal to children length

behavior

position

requiredPathname

scrollFunc

Example

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

const App = () => {
  return (
    <BrowserRouter>
      <ChildrenHash
        hashes={[
          "#div",
          { hash: "#heading", behavior: "smooth" },
          { hash: "#paragraph", position: "end" },
        ]}
        requiredPathname={["/login", "/signup"]}
      >
        <div ref={ref1}>Element #1</div>
        <h4 ref={ref2}>Element #2</h4>
        <p ref={ref3}>Element #3</p>
      </ChildrenHash>
    </BrowserRouter>
  );
};