❤
npm
Sign UpSign In

This package has been deprecated

Author message:

Overscroll is deprecated. Please use Stickyroll instead (https://www.npmjs.com/org/stickyroll)

react-over-scroll
TypeScript icon, indicating that this package has built-in type declarations

3.2.0 • Public • Published

react over-scroll

DEMO | DOCUMENTATION

npm GitHub license Travis
David
David

yarn add 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

OverScroll allows the usage of a child function or a render property.

Example 1

import React from "react";
import OverScroll from "react-over-scroll";
 
export const Example = () => (
    <OverScroll slides={5}>
        {({page, progress}) => (
            <div>
                <ul>
                    <li>progress: {progress}</li>
                    <li>page: {page}</li>
                </ul>
            </div>
        )}
    </OverScroll>
);

Example 2

import React from "react";
import OverScroll from "react-over-scroll";
 
const renderPages = ({page, progress}) => (
    <div>
        <ul>
            <li>progress: {progress}</li>
            <li>page: {page}</li>
        </ul>
    </div>
);
 
export const Example = () => <OverScroll slides={5} render={renderPages} />;

Configuration

  • anchors: ?string: Use anchors to allow deep-links and browser history.
  • factor: ?number: Change the factor that translates scroll offset to progress.
  • slides: number: The number of pages. Each page has its own progress scope.
import React from "react";
import OverScroll from "react-over-scroll";
 
export const Example = () => (
    <OverScroll slides={5} anchors="!/example" factor{2}>
        {({page, progress, anchors}) => (
            <div>
                <ul>
                    <li>progress: {progress}</li>
                    <li>page: {page}</li>
                    {Array(5).fill(Boolean).map((x, i) => {
                        // Add links to for each page
                        return (
                            <li key={i}>
                                <a href={`#${anchors}/${i + 1}`}>Go to Page {i + 1}</a>
                            </li>
                        )
                    })}
                </ul>
            </div>
        )}
    </OverScroll>
);

Advanced

Listener

You can import a listener to build plugins. Listener is only active if a child function is used.

import React from "react";
import OverScroll, {Listener} from "react-over-scroll";
 
export const MyPlugin = () => (
    <Listener>
        {({page, progress}) => (
            <div>
                <ul>
                    <li>progress: {progress}</li>
                    <li>page: {page}</li>
                </ul>
            </div>
        )}
    </Listener>
);
 
export const Example = () => <OverScroll slides={2}>{() => <MyPlugin />}</OverScroll>;

progressable

Overscroll provides a helper to add a progress variable to your component.

import React from "react";
import OverScroll, {progressable, Listener} from "react-over-scroll";
import styled from "styled-components";
 
const Box = styled.div`
  height: 1rem;
  width: calc(var(--progress, 0) * 100%;
  background: currentColor;
`
 
// Using Listener
const ProgressBar = () => (
    <Listener>{
        ({progress}) => progressable(<Box/>, progress))
    }</Listener>
);
// Usage
// <ProgressBar/>
 
// Using properties
// const ProgressBar = ({progress}) => progressable(<Box/>, progress));
// Usage
// <ProgressBar progress={progress}/>
 
export const Example = () => (
    <OverScroll slides={5}>
        {({page, progress}) => (
            <div>
                <ul>
                    <li>progress: {progress}</li>
                    <li>page: {page}</li>
                    <ProgressBar/>
                </ul>
            </div>
        )}
    </OverScroll>
);

Styled elements

Overscroll provides a wrapper and pagers.

import React from "react";
import {ThemeProvider} from "styled-components";
import OverScroll, {Listener} from "react-over-scroll";
import {Inner, Pagers, themes} from "react-over-scroll/lib/src/styled";
 
export const Example = () => (
    <OverScroll slides={5} anchors="!/example">
        {context => (
            <ThemeProvider theme={themes.color.blue}>
                <Inner withPagers={true}>
                    <Pagers useContext={true} />
                    <ul>
                        <li>progress: {context.progress}</li>
                        <li>page: {context.page}</li>
                    </ul>
                </Inner>
            </ThemeProvider>
        )}
    </OverScroll>
);

Development

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

Setup

yarn

Run dev server

yarn dev --hot

For more options take a look at the package.json for this project.

Copyright © 2018 - Gregor Adams

Readme

Keywords

Package Sidebar

Install

npm i react-over-scroll

Repository

github.com/pixelass/react-over-scroll

Homepage

github.com/pixelass/react-over-scroll#readme

Weekly Downloads

2

Version

3.2.0

License

MIT

Unpacked Size

41.1 kB

Total Files

20

Last publish

Collaborators

  • pixelass
Try on RunKit
Report malware