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][npm] which is bundled with [node][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>;
}