ReusedProps

Reused Props

Props that are used by multiple components

behavior

• The behavior of the scroll
• Note: not all browsers have implemented options for Element.scrollIntoView (which is what React Hash Scroll uses internally)
  • See MDN and Can I Use for a comprehensive list
  • There is also a browser polyfill for smooth scrolling which you can install separately so smooth scrolling will work in all browsers
• Type:
  • "smooth": Smooth scroll (Default)
  • "auto": Instant scroll

position

• The position of the element on the page after it is scrolled to
• Like behavior, some browsers don't support scrollIntoView options yet, so this property may not work on all browsers.
• Type:
  • "center": Element will scroll to center of page (Default)
  • "end": Element will scroll to bottom of page
  • "start": Element will scroll to top of page
  • "nearest": Element will scroll to center/end/start depending on which one is closest

requiredPathname

• Only scroll on a specific pathname(s)
• Note: "/" matches to the website name with no pathname
• Don't end pathnames with "/" (Ex. "/test/")
• For example, to only scroll on:
  • /home/contact: "/home/contact"
  • /docs or /features: ["/docs", "/features"]
• Type: string | string[]

scrollFunc

• A custom scroll function that overrides the default scrollIntoView function used by React Hash Scroll
• Parameters:
  • ref: The ref object that contains the target element
  • behavior: The defined scroll behavior for the element or the default behavior
  • position: The defined scroll position for the element or the default position
• Type: (ref,behavior,position) => void