material-ui-back-to-top

An easy-to-use Material-UI/React component for returning the user to the top of the page

Install

npm i material-ui-back-to-top

NOTE: This component requires Material-UI to work

Usage

import React from "react"
import { BackToTop } from "material-ui-back-to-top"

export const Layout = ({ children }) =>{
  return (
    <div>
      <BackToTop />
      { children }
    </div>
  )
}

API

|Property|Description|Type|Options|Default| |--|--|--|--|--| |buttonPosition|Specify the location of the button|object|N/A|{ bottom: 15, right: 15 } |size|Specify the size of the button|string|"large", "medium", "small"|"large" |color|Specify the color of the button|string|"default", "inherit", "primary", "secondary"|"default" |icon|Use a custom icon for the button (NOTE: Must be a React component)|node|N/A|ChevronUp |showText|Show text next to the icon|boolean|N/A|false |text|Specify the text to show (only works if showText is true)|string|N/A|"Back to top" |fadeDuration|Specify the fade in/out duration of the button|number \| { appear?: number, enter?: number, exit?: number }|N/A|{ enter: 225, exit: 195 } |disableSmoothScroll|Disable smooth scrolling|boolean|N/A|true |scrollPositionThreshold|Specify the scrollY position threshold for displaying the button|number|N/A|200 |buttonShowDuration|Specify how long the button should remain on the screen when user stops scrolling|number|N/A|3000 |scrollTopOffset|Specify an offset position for the scroll to top|number|N/A|0 |FadeProps|Pass props to the Fade component|object|View Material-UI docs|{} |FabProps|Pass props to the Fab component|object|View Material-UI docs|{}