React Simple Scroll up (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-simple-scroll-up

Yarn

yarn add react-simple-scroll-up

---

Examples

import React from 'react'
import { ScrollToTop } from 'react-simple-scroll-up'

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	number	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 or ReactNode	Optional	Use any HTML Symbols by simply copy/paste it OR any custom element, e.g. FontAwesomeIcon	🡩
symbolSize	number	Optional	Symbol font size (in pixels). Only applies when symbol is a string.	20
symbolColor	string	Optional	Symbol color.	#fff
onScrolling	function	Optional	Callback function that is triggered while scrolling with value passed	-
onClick	function	Optional	Callback function that is triggered when button is clicked	-
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 © awran5