react over-scroll

A scroll based slideshow with wings.

API Documentation

npm Coveralls branch bitHound Overall Score Standard Version js-standard-style Commitizen friendly
Travis David David
GitHub license GitHub issues GitHub forks GitHub stars

npm install react-over-scroll


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.


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

Example 1

const renderSlide = (slide, percent) => (
    <div>You are on Slide {slide + 1}</div>
    <div>{percent}% of this slide has been scrolled</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>Page {page + 1}</div>
            <span style={{
              width: `${progress}%`,
              height: 10,
              background: 'currentcolor'
// Usage
// {slider}


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


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.