use-autoscroll

    1.1.0 • Public • Published

    useAutoScroll: a React Hook

    This is a React custom hook. It allows you to easily add functionality to your site to programatically vertical scroll through a series of items of interest. A typical scenario would be a vertical stack of "card" type divs, and having an arrow button that you click, to scroll through them.

    A codesandbox showing the usage can be seen here.

    Getting Started

    The basic functionality is relatively straightforward. You call useAutoScroll, and pass in a DOM node (presumably obtained as a ref), and a CSS-type selector string, as would be used in document.querySelector(e.g., 'h2', '.card' 'h2.card', etc.). useAutoScroll will search within the DOM node using the query selector, and make each item a scrollable destination, in addition to the top of the page. It then returns an object with the following signature: { scrollNext: func, scrollBack: func, position: number, length: number }. The first two properties are functions, and will programatically move through the scroll targets in question. They will wrap around (i.e., if you have 5 elements, and click to go the 6th, you will be taken back to the first). It is up to you to programatically disable this activity if you desire. You can do this using the last two arguments, position and length. The position property tells the current index in the array of scroll-points (including the top of the page). The length property tells you how many such scroll points there currently are. You could use these to selectively deactivate the scrolling, hide the scroll buttons, etc.

    Prerequisites

    This is meant to be used with React 16.8+ and is designed for React DOM only.

    Installing

    This can be installed using yarn add use-autoscroll or npm install use-autoscroll. It can then be imported as the default import for the package: import useAutoScroll from 'use-autoscroll.

    Usage Example

    The basic semantics are as follows:

    const { scrollNext, scrollBack, position, length } = useAutoScroll(ref.current, '.card')
    

    A more elaborate example is as follows:

    import React, { useEffect, useState, useRef } from "react";
    import ReactDOM from "react-dom";
    import useAutoScroll from "use-autoscroll";
    const data = [0, 1, 2, 3, 4, 5];
    
    function App() {
      const rootNode = useRef(null);
    
      const { scrollNext, scrollBack, position, length } = useAutoScroll(
        rootNode.current,
        ".card"
      );
      console.log(position, length);
      return (
        <div className="App" ref={rootNode}>
          <h1>useAutoScroll Example</h1>
          <div className="controls">
            <button onClick={scrollBack}>
              up
            </button>
            <button onClick={scrollNext}>
              down
            </button>
          </div>
          {data.map(datum => (
            <div className="card" key={datum}>
              {datum}
            </div>
          ))}
        </div>
      );
    }
    
    

    Contributing

    Contributions and suggestions are welcome! Please open an Issue with any ideas!

    Authors

    License

    This project is licensed under the MIT License - see the LICENSE.md file for details

    Keywords

    none

    Install

    npm i use-autoscroll

    DownloadsWeekly Downloads

    2

    Version

    1.1.0

    License

    ISC

    Unpacked Size

    6.75 kB

    Total Files

    4

    Last publish

    Collaborators

    • kambowman