react-reading-progress

Reading progress bar component

Demo

Install

$ npm i react-reading-progress

Usage

import ReadingProgress from 'react-reading-progress'

...

<ReadingProgress targetEl="#target-el" />

<article id="target-el">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel pharetra vel turpis nunc. Ut sem viverra aliquet eget sit amet tellus. Lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit. In mollis nunc sed id semper risus in hendrerit gravida. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Amet purus gravida quis blandit. Et ultrices neque ornare aenean euismod elementum nisi quis. Vitae aliquet nec ullamcorper sit amet.
</article>

Props

targetEl={ String }

Target article's selector. If this prop is not specified, document.body will be used.

rootEl={ String }

Root element selector. If this prop is not specified, window will be used.

hideNoAndFullProgress={ Boolean }

If this is set to true, the progress bar will be hidden if the progress is at 0 or max progress.

License

MIT