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

1.3.4 • Public • Published

react-smooth-scroll-hook

GitHub license npm version GitHub stars

The useSmoothScroll hook finish smooth scroll behaviour in react component by requestAnimationFrame.

Storybook Docs are Here.

Feature

  • 🚀 You don't need to warn about compatibility, it use requsetAnimationFrame api to finish smooth scroll behaviour.

  • 👉 Provide direction option ,you can set x for horizontal, y for vertical.

  • 💧 No Third Party dependencies, light and pure.

Installation

npm install react-smooth-scroll-hook

useSmoothScroll

Quick Start

import React, { useRef } from 'react';
import useSmoothScroll from 'react-smooth-scroll-hook';
export const Demo = () => {
  // A custom scroll container
  const ref = useRef(null);
 
  // Also support document.body / document.documentElement, and you don't need to set a ref passing to jsx
  const ref = useRef(document.body);
 
  const { scrollTo } = useSmoothScroll({
    ref,
    speed: 100,
    direction: 'y',
  });
 
  return (
    <>
      <button onClick={() => scrollTo('#item-20')}>scrollTo('#item-20')</button>
      <div
        // if use custom scroll container, pass ref
        ref={ref}
        style={{
          overflowY: 'scroll',
          maxHeight: '200px',
        }}
      >
        {Array(100)
          .fill(null)
          .map((_item, i) => (
            <div key={i} id={`item-${i}`}>
              item-{i}
            </div>
          ))}
      </div>
    </>
  );
};

Props

  • ref: RefObject<HTMLElement>, container which set as overflow: scroll, if scroll whole document, pass ref = useRef(document.documentElement) or useRef(document.body).
  • speed: Distance in one frame to move in requestAnimationFrame mode, defaults to 100, if not provide, speed depends on native API scrollTo.
  • direction: Scroll direction, x for horizontal or y for vertical.
  • threshold: Judge scroll is finished has an error range, .defaults to 1.

Returns of Hook

  • scrollTo (string|number) => void

    • Pass number: the distance to scroll, e.g. scrollTo(400)
    • Pass string: the element seletor you want to scrollTo, meanwhile passing to document.querySelector, e.g. scrollTo('#your-dom-id')
  • reachedTop boolean: Whether it has reached the top of refContainer

  • reachedBottom boolean: Whether it has reached the bottom of refContainer

  • scrollToPage (number) => void: Pass page(number), which scroll to a distance as multiples of container size(offsetWidth/offsetHeight) .e.g scrollToPage(1),scrollToPage(-1)

  • refreshState () => void: Manually refresh the state of reachTop and reachBottom, possibly useful in some situation.

  • refreshSize () => void: Manually refresh the size of ref container, possibly useful in some situation.

Demo

useScrollWatch

Proviede a list of dom like below, and pass the parent container ref to hook, it return the scrollbar current state of scrollTop, curIndex, curItem.

Quick Start

import React, { useRef } from 'react';
import { useScrollWatch } from 'react-smooth-scroll-hook';
export const ScrollConatainerMode = () => {
  const ref = useRef(null);
  const { scrollTop, curIndex, curItem } = useScrollWatch({
    ref,
    list: [
      {
        href: '#item-0',
      },
      {
        href: '#item-10',
      },
      {
        href: '#item-20',
      },
    ],
  });
  return (
    <>
      <h2>Scroll Container Mode</h2>
      <div>
        <p>
          <strong>scrollTop:</strong> {scrollTop}
        </p>
        <p>
          <strong>curIndex:</strong> {curIndex}
        </p>
        <p>
          <strong>curHref:</strong> {curItem?.href}
        </p>
      </div>
      <div
        style={{
          padding: '10px',
          maxHeight: '200px',
          overflowY: 'scroll',
        }}
        ref={ref}
      >
        {Array(100)
          .fill(null)
          .map((_item, i) => (
            <div key={i} id={`item-${i}`}>
              item-{i}
            </div>
          ))}
      </div>
    </>
  );
};

Props

  • list Array({href, offset}): href is elemet selector string, which passing to querySelector, such as #element-id
  • ref: the same as ref of useSmoothScroll

Returns of Hook

  • scrollTop number: current scrollTop of scroll container.
  • curIndex number: current Index of list
  • curItem {href, offset}: current Item of list

Demo

Readme

Keywords

none

Package Sidebar

Install

npm i react-smooth-scroll-hook

Weekly Downloads

2,041

Version

1.3.4

License

MIT

Unpacked Size

110 kB

Total Files

19

Last publish

Collaborators

  • ron0115