Neurotic Programmer Masquerade

    react-scroll-to-top
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.8 • Public • Published

    react-scroll-to-top

    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

    Live demo

    A live demo can be found here

    Installation

    Run npm i react-scroll-to-top

    Usage

    Import and then include <ScrollToTop /> anywhere in your render/return function:

    import ScrollToTop from "react-scroll-to-top";
    
    function CoolPage() {
      return (
        <div>
          <ScrollToTop smooth />
          <h1>Hello, world!</h1>
        </div>
      );
    }

    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 completely override styling

    Smooth scrolling uses a newer window.scrollTo implementation.
    Check out its support in browsers at MDN web docs.

    Examples

    With custom SVG path
    With custom SVG component
    With custom DOM element

    Types

    Written in TypeScript, no need for @types installation

    Install

    npm i react-scroll-to-top

    DownloadsWeekly Downloads

    2,500

    Version

    1.0.8

    License

    MIT

    Unpacked Size

    16 kB

    Total Files

    6

    Last publish

    Collaborators

    • hermannygaard