Usage with ref for target react element
Use the component with the props "refTarget" for target element.
example:
<ScrollProgressRead refTarget={refContainer} />Suscipit condimentum pharetra vitae fusce viverra amet sit taciti arcu justo hendrerit nostra, scelerisque ullamcorper, nisl sagittis aenean sit, himenaeos torquent placerat auctor vulputate ullamcorper placerat sollicitudin tortor, rhoncus eleifend donec leo est, quisque consectetur curabitur duis sapien velit dictumst, faucibus amet dolor nisi tempor ultricies turpis proin, dictumst rutrum, dapibus laoreet aptent neque, quis libero turpis in eget facilisis, eleifend curabitur, ultricies erat bibendum at, quam adipiscing tempor nulla sociosqu bibendum suspendisse, porta dictumst nam, massa augue quisque tortor, ornare aliquam faucibus fames, ad interdum urna at ornare tristique faucibus vivamus in varius class, litora cubilia malesuada phasellus mi potenti, dapibus velit ac tincidunt, pulvinar litora tincidunt, tortor scelerisque metus hendrerit aptent elit, ligula id tempus, velit laoreet elit morbi libero nam taciti enim, eros adipiscing, lacus sapien ornare himenaeos neque, magna curabitur cubilia venenatis justo tincidunt amet eros metus felis, morbi eget curae metus facilisis primis interdum ut, pulvinar sapien cursus non nibh curae vestibulum mollis et nisi, ante porta adipiscing habitasse rutrum aliquet curabitur posuere a senectus semper, hendrerit turpis praesent leo congue habitant iaculis, lorem eget netus at urna, tincidunt elit aptent vehicula vel, at sem, neque primis sociosqu ac ultrices nec pretium est pretium hendrerit netus, a donec suspendisse, pretium aptent litora pellentesque consequat, proin dolor justo tempor conubia fermentum dui sapien at erat, eget rutrum per, curabitur torquent maecenas lacinia eu inceptos scelerisque cursus dictumst volutpat aliquet, porttitor velit fringilla purus fames vulputate magna interdum placerat lacinia tincidunt ultricies, aenean tincidunt urna, justo elementum sed auctor suspendisse id sit, erat netus, leo cursus dictum ac aenean, quisque consectetur laoreet elit conubia sollicitudin tempus blandit porta id, augue commodo enim vestibulum eu a, purus curae gravida phasellus, ultricies tempus posuere felis lectus nunc magna laoreet nisl, nostra felis auctor venenatis, nam nunc pulvinar mi cras vel elit tempor nisi turpis fermentum molestie, ut vulputate posuere nulla vel eget nisl ligula euismod integer, maecenas nullam fames sodales ligula rhoncus consequat primis consectetur magna scelerisque, lacus lacinia auctor dolor fringilla suscipit sodales, habitasse ornare in tempus, sociosqu integer, ullamcorper amet nisi, luctus nullam orci torquent donec velit duis diam turpis, ultrices pellentesque tellus porta lacus ligula malesuada, class venenatis, dolor proin condimentum porta mollis cursus fames scelerisque tempus morbi cursus egestas, nostra suscipit in consectetur lorem cras nam, urna sem luctus nam, a fusce, nostra etiam massa convallis aenean suscipit lorem primis tortor mi, aliquet posuere hac, aliquam taciti purus, primis donec, mauris feugiat ultricies, luctus laoreet maecenas diam ultricies mauris dictumst magna ante, adipiscing placerat cursus faucibus leo vel erat libero, dictumst posuere nisl quam aenean fusce malesuada porta potenti vel condimentum, pharetra nulla tincidunt taciti dapibus, at class nisl, dolor porta primis habitant elit est turpis pharetra accumsan tincidunt, volutpat urna gravida taciti velit fames tortor orci curabitur luctus turpis, proin erat porttitor lectus condimentum laoreet scelerisque rhoncus, potenti malesuada odio pretium, lectus aptent sagittis feugiat suscipit, volutpat felis, turpis commodo hendrerit cursus blandit dui ut eleifend convallis metus cras, sollicitudin torquent pharetra enim nullam scelerisque facilisis ultricies, vitae aliquam pharetra consequat quisque curae velit consectetur lorem viverra massa, dapibus nostra dictumst donec magna, mollis mattis quisque curae at maecenas libero tempus, mattis quam aenean congue lacinia gravida etiam ut per, volutpat quam vestibulum, nunc iaculis adipiscing lorem egestas laoreet habitasse tortor, arcu ad non, diam est, ac convallis enim vivamus fames faucibus rhoncus consequat, nec fermentum ad ante sollicitudin himenaeos platea habitasse et, ultricies fusce ad litora etiam, class sagittis inceptos sociosqu lorem accumsan vestibulum augue placerat luctus malesuada venenatis, diam quisque eget maecenas leo quis ultricies ipsum pharetra ornare nisl, est sed, vestibulum sollicitudin potenti conubia pulvinar metus varius tellus et auctor ipsum, urna accumsan eget vulputate, nostra purus pharetra fermentum massa himenaeos erat habitant senectus enim, ut ultricies condimentum vivamus class iaculis justo ornare nullam nostra malesuada platea, tortor nibh rhoncus commodo nostra netus quis per, accumsan taciti luctus vitae, sed aenean phasellus facilisis vestibulum conubia tempus bibendum ut hendrerit lacinia venenatis, fermentum feugiat molestie platea taciti nibh magna at primis himenaeos gravida, euismod posuere pretium ut quisque ornare. Risus odio lectus semper diam ullamcorper lobortis integer viverra venenatis lacinia odio eget, orci euismod posuere gravida conubia rutrum donec ligula auctor tellus.
Code used for this page
import React, { forwardRef, useState, useRef } from "react"
import ScrollProgressRead from "react-scroll-progress-read"
import { getParagraph } from "../../helpers/lorem"
// forward ref to p element
const Main = forwardRef(({ txt }, ref) => (
<p dangerouslySetInnerHTML={{ __html: txt }} ref={ref} />
))
const Container = () => {
const mainTxt = useRef()
const [txt, setText] = useState(getParagraph(700))
const addText = () => setText(`${getParagraph(200)}<br /><br />${txt}`)
return (
<>
<div
style={{ margin: 0, padding: 0, position: "fixed", left: 0, top: 0 }}
>
<ScrollProgressRead refTarget={mainTxt} />
</div>
<button type="button" onClick={addText}>
Add text to paragraph
</button>
<div style={{ marginTop: "20px" }}>
<Main txt={txt} ref={mainTxt} />
</div>
</>
)
}
export default Container