react-use-scroll-indicator v1.1.1

React useScrollIndicator hook

Create your own scroll indicators using this simple, but very versatile hook.

[state, api] =  useScrollIndicator(options);

Simple Usage

Scroll tracking for the whole page

import * as React from 'react';
import { useScrollIndicator } from 'react-use-scroll-indicator';

export const BlogPost = () => {
  const [state] = useScrollIndicator();

  return (
    <section>
      <div>Percent of page scrolled: {state.width}%</div>
      <article>... Main content ...</article>
    </section>
  );
};

Scroll tracking for the specific element

import * as React from 'react';
import { useScrollIndicator } from 'react-use-scroll-indicator';

export const BlogPost = () => {
  const [state] = useScrollIndicator({ onElement: true });

  return (
    <section>
      <div>Percent of element scrolled: {state.width}%</div>
      <article ref={state.targetElement}>
        ... Scroll percentage will be calculated only on this element ...
      </article>
      <div>This element won't be included in the calculation.</div>
    </section>
  );
};

Options

State and API

Hook returns the following variables and methods.

[state, api] =  useScrollIndicator(options);

State

API

Issues and Contributions

Feel free to report issues you find and feel free to contribute to the project by creating Pull Requests.

Contributions are welcome and appreciated!

Support

The project is created and maintained by Adrian Bece with the generous help of community contributors. If you have used the plugin and would like to contribute, feel free to Buy Me A Coffee.