react-window-scroll-top

Just a simple component that scrolls view to top of page.

Installation

npm install --save react-window-scroll-top

Dependencies

• React ^15.6.1

How To Use

There are two main ways to use the module, either leave standard and pass in props to change the look and functionality, or have in encapsulate children elements and only take care of the scrolling part.

Standard

import React, { Component } from 'react';
import { ScrollTop } from 'react-window-scroll-top';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src="https://somelogo.png" className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to Our App</h1>
        </header>
        <ScrollTop 
            delay={2} 
            placement="bottom" 
            size="80px"
            text="Scroll up" 
        />
        <p className="App-intro">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          ... lots of text
        </p>
    </div>
  } ...

With Children

import React, { Component } from 'react';
import { ScrollTop } from 'react-window-scroll-top';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src="https://somelogo.png" className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <ScrollTop
            delay={2}
        >
            <button>Scroll up</button>
        </ScrollTop>
        <p className="App-intro">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          ... lots of text
        </p>
    </div>
} ...

Properties

Property | Brief Description | Example (*d=default) | Data Type
--------------|-----------------------------------------------------|-----------------------|------------ delay | In ms, lower is faster scroll. | Delay={15} d | Number placement | Bottom or Top of window ( inset set by default at 2vh) | placement="bottom" d | String size | Size of button if using default design | size="80px" d | String scrollOffset | How far down a user must scroll to show 'scroller' component | scrollOffset={20} d | Number text | text to display in button | test="top" d | String style | styles to apply to button | ** d | css object

** styles will overwrite predefined defaultStyles with the exception of placement and size