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

| Key | Type | Default Value | Description | | ------------ | ------- | ------------- | --------------------------------------------------------------------------------------------------------------------- | | onElement | boolean | false | If set to true, it will return a ref that needs to be assigned to the element that will be used in scroll indicator | | precision | number | 2 | Decimal places of percentage that will be used for scroll indicator. | | initialValue | number | 0 | Initial value of the percentage for scroll indicator. |

State and API

Hook returns the following variables and methods.

[state, api] =  useScrollIndicator(options);

State

| Key | Description | | ------------- | ------------------------------------------------------------------------------------- | | value | Scroll percentage | | targetElement | ref that can be assigned to an element. Returned only if onElement is set to true |

API

| Key | Description | | -------------- | ----------------------------------------- | | activeListener | Currently active scroll listener. | | setScrollState | Method that sets the value of the hook. |

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.