@bebraw/react-over-scroll NPM

react over-scroll

A scroll based slideshow with wings.

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}