react-simple-scroll-up

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

Usage no npm install needed!

<script type="module">
  import reactSimpleScrollUp from 'https://cdn.skypack.dev/react-simple-scroll-up';
</script>

README

React Simple Scroll up (back to top)

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

NPM JavaScript Style Guidenpm bundle sizeGitHub

screenshot

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 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 -

Edit react-simple-scroll-up

License

MIT © awran5