Nodeschool Public Materials

    react-use-scroll-to-element-hook
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    React - Use Scroll to Element Hook

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


    NPM JavaScript Style Guide


    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>;
    }

    Install

    npm i react-use-scroll-to-element-hook

    DownloadsWeekly Downloads

    17

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    11.2 kB

    Total Files

    11

    Last publish

    Collaborators

    • patricktran