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>
  );
};