react-reading-progress-plus
Reading progress bar component
Demo
Install
$ npm i react-reading-progress-plus
Usage
import ReadingProgress from 'react-reading-progress-plus'
...
<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