Create your own scroll indicators using this simple, but very versatile hook.
[state, api] = useScrollIndicator(options);
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>
);
};
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>
);
};
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. |
Hook returns the following variables and methods.
[state, api] = useScrollIndicator(options);
Key | Description |
---|---|
value | Scroll percentage |
targetElement | ref that can be assigned to an element. Returned only if onElement is set to true |
Key | Description |
---|---|
activeListener | Currently active scroll listener. |
setScrollState | Method that sets the value of the hook. |
Feel free to report issues you find and feel free to contribute to the project by creating Pull Requests.
Contributions are welcome and appreciated!
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.