ChildrenHash

ChildrenHash

Summary

Scrolls to a 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 "#"
• Type: string[] | BaseScrollOptionsWithHash[]

children

• Required
• Number of children should equal the number of hashes
• Type: ReactElement[]

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>Element #1</div>
        <h4>Element #2</h4>
        <p>Element #3</p>
      </ChildrenHash>
    </BrowserRouter>
  );
};