react-scrolltop-button ☝️

React component for scrolling to top of the page.

Demo

http://graysonhicks.github.io/react-scrolltop-button/demo/

Install

npm install react-scrolltop-button

Usage

import ScrollTop from "react-scrolltop-button";

Use all defaults

<ScrollTop />

Override/Add to defaults

<ScrollTop
  text="take me to your header"
  distance={100}
  breakpoint={768}
  style={{ backgroundColor: "red" }}
  className="scroll-your-role"
  speed={1000}
  target={75}
  icon={<MyIcon />}
/>

With `styled-components`

ScrollTop styles can be modified with styled-components as well. Other props are then passed down through your styled component.

const StyledScrollTop = styled(ScrollTop)`
  background-color: red;
`;

<StyledScrollTop
  text="i'm styled with styled-components and some other props are overwritten too"
  distance={100}
  breakpoint={768}
/>;

Note that overriding the style prop for the <MyIcon/> is done one of the same two ways as above.

Props

text

string (default: "back to top")

Desired text to show on desktop version of the button. No text shows on mobile.

distance

number (default: 50)

The distance in pixels from the top of the document that button should show.

breakpoint

number (default: 991)

Screen width in pixels when mobile/desktop buttons switch.

style

object

Standard CSS style object to override or add to default styles.

className

string (default: "react-scrolltop-button" / "react-scrolltop-button-mobile")

Custom class name to be added to component. Is in addition to default react-scrolltop-button and react-scrolltop-button-mobile classes. Base classes are not removed.

speed

number (default: 250)

Duration in milliseconds for scrolling to top .

target

number (default: 0)

Distance in pixels from top of page to scroll up to.

icon

element

A custom React component that is shown on the mobile button.

Contributing

Fully open to contributions, come over to the repo and touch base!

Name		Name	Last commit message	Last commit date
docs		docs
lib		lib
src		src

Latest commit

History

Folders and files