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