gatsby over-scroll

A fork of React Overscroll by sinnerschrader to make it compatible with Gatsby server-side rendering, mainly by removing references to window in the constructor.

API Documentation
Demo

npm install react-over-scroll

Description

OverScroll is a slide-show or content-slider, call it what you want. It is a full-screen/viewport element that snaps into fixed mode when it reaches the viewports top edge. Scrolling is now translated to paging, switching the content each time a predefined scroll amount has been reached. During an active slide two values are available. (See Render for more information). Take a look at the Demo to get a better understanding of the behavior.

Render

The children of OverScroll expect a function which is called with two arguments.

Example 1

const renderSlide = (slide, percent) => (
  <div>
    <div>You are on Slide {slide + 1}</div>
    <div>{percent}% of this slide has been scrolled</div>
  </div>
)
// Usage
// <OverScroll slides={10} children={renderSlide} />

Example 2

const pages = [<div>Hello</div>,<div>World</div>]
const slider = (
  <OverScroll slides={pages.length}>
    {(page, progress) => (
      <div>
        <section>
          {pages[page]}
        </section>
        <footer>
          <div>Page {page + 1}</div>
          <div>
            <span style={{
              width: `${progress}%`,
              height: 10,
              background: 'currentcolor'
            }}/>
          </div>
        </footer>
      </div>
    )}
  </OverScroll>
)
// Usage
// {slider}

Development

If you want to build this module from source or contribute to this project you should follow the steps listed below.

Setup

npm install

Run dev server

npm start

Watch for file changes

npm run watch

Known issues: CSS does not work with livereload and requires a manual browser reload.