A reusable, customizable scroll-to-top React component
Switch branches/tags
Nothing to show
Clone or download
Latest commit 4ed037e Aug 22, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs description Apr 17, 2018
lib minify dist Aug 22, 2018
src docs cleaning Apr 14, 2018
.babelrc npm setup Apr 12, 2018
.gitignore lib and docs change Apr 13, 2018
.npmignore npm setup Apr 12, 2018
LICENSE npm setup Apr 12, 2018
README.md readme Apr 17, 2018
package-lock.json minify dist Aug 22, 2018
package.json 0.1.5 Aug 22, 2018
webpack.config.js npm setup Apr 12, 2018

README.md

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!