react-to-top

React to Top (back to top)

A minimal lightweight react component for adding a nice scroll up (back to top) with onScroll progress.

Install

npm

npm i react-to-top

Yarn

yarn add react-to-top

---

Examples

import React from 'react'
import { ScrollToTop } from 'react-to-top'

const MyComponent = () => {
  return (
    <div className='App'>
      <ScrollToTop {/* Props */} />
    </div>
  )
}

Props

Prop	Type	Options	Description	Default
size	number	Optional	Set button width and height (in pixels)	50
offsetTop	string	Optional	Show button after number of pixels that document has scrolled vertically	100
bgColor	string	Optional	Button background color	rgb(0 0 0 / 75%)
strokeWidth	number	Optional	Scroll progess bar width (in pixels)	4
strokeFillColor	string	Optional	Scroll progess bar fill color	rgb(0 0 0 / 50%)
strokeEmptyColor	string	Optional	Scroll progess bar empty color	rgb(200 200 200 / 85%)
symbol	string	Optional	Use any HTML Symbols by simply copy/paste it	🡩
symbolSize	number	Optional	Symbol font size (in pixels)	20
symbolColor	string	Optional	Symbol color	#fff
onScrolling	function	Optional	Callback function that is triggered while scrolling with value passed	-
onScrollEnd	function	Optional	Callback function that is triggered when scroll is ended	-
className	string	Optional	CSS class name	to-top-progress
style	React.CSSProperties	Optional	CSS style	-

License

MIT © Joaquin A. Moquette