React - Use Scroll to Element Hook

React hook for scrolling to elements on the same page (Anchor Link)

Installation

This module is distributed via npm which is bundled with node and should be installed as one of your project's dependencies:

npm install --save react-use-scroll-to-element-hook

Demo

https://codesandbox.io/s/react-use-scoll-to-element-hook-example-1kids

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import { useScrollToElement } from 'react-use-scroll-to-element-hook';

function MyComponent() {
  // some code...

  const FAQS = [
    {
      name: 'Question 1',
      answer: 'Lorem ipsum',
    },
    {
      name: 'Question 2',
      Ananswerswer: 'Pretium fusce id ',
    },
    {
      name: 'Question 3',
      answer: 'Dolor sit amet',
    },
  ];

  const faqNames = FAQS.map(faq => faq.name);

  //Refer to: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
  const scrollIntoViewOptions = {
    behavior: 'auto';
  }

  const { getScrollToElementRef, scrollToElementClickHandler } = useScrollToElement(
    faqNames, //array of strings
    scrollIntoViewOptions //this is optional - behavior: smooth is used by default
  );

  return <div>{/* render FAQ with Anchor links here - see CodeSandBox demo */}</div>;
}