React hook for scrolling to elements on the same page (Anchor Link)
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
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>;
}