A lightweight and customizable button component that scrolls to the top of a page when pressed The button is only visible once a certain height has been reached on the page
npm install react-scroll-to-topA lightweight and customizable button component that scrolls to the top of a page when pressed
The button is only visible once a certain height has been reached on the page
With npm:
npm i react-scroll-to-top
or with Yarn:
yarn add react-scroll-to-top
Import and then add
``js
import ScrollToTop from "react-scroll-to-top";
function CoolPage() {
return (
Props
| Prop | Type | Description | Default |
| --------- | ------- | ------------------------------------------------------------------------------------ | ------------- |
| smooth | boolean | Whether to use smooth scrolling\* | false |
| top | number | Height after page scroll to be visible | 20 |
| color | string | The SVG icon fill color | "black" |
| svgPath | string | The SVG icon path d attribute | An arrow path |
| width | string | The SVG icon width | "28" |
| height | string | The SVG icon height | "28" |
| viewBox | string | The SVG icon viewBox attribute | "0 0 256 256" |
| component | any | Component to override SVG icon. See examples | |
| style | Object | Object to add/override styling | |
| className | string | Classname to add/override styling (note,
for overrides might be needed) | |Smooth scrolling uses a newer
window.scrollTo` implementation.\With custom SVG path
With custom SVG component
With custom DOM element
Written in TypeScript, no need for @types installation