Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-on-scroll with all npm packages installed. Try it out:

var reactOnScroll = require("react-on-scroll")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-on-scroll v0.2.2

React to scroll events: animate components, lazy load data, infinite scroll

react-on-scroll

Travis dependencies devDependencies downloads

React to scroll events: animate components, lazy load data, infinite scroll

Props

  • className string optional css class name

  • triggerBase string "top"|"bottom" optional which border of the element will be used to compute the distance from the top and bottom of the screen. If not set the callback will trigger with true when any part of the element is between top and bottom

  • triggers array of objects with the following keys

    • top number optional distance from top of the screen to trigger the state change (negative numbers are off screen)
    • bottom number optional distance from bottom of the screen to trigger the state change (negative numbers are off screen)
    • repeat number optional maximum number of times to execute the callback
    • callback function(visible: boolean) the function to call each time the visibility state changes

Triggers

[
  { top: 50, bottom: 100, callback: visible => doSomething(visible) },
]
// triggerBase = "top"
// will trigger with visible=true when the top border of the element is between 50px from top and 100px from bottom


// triggerBase = undefined
// will trigger with visible=true when any part of the element is between 50px from top and 100px from bottom

Examples

https://github.com/erichbehrens/react-on-scroll/tree/master/src/pages/components

Sticky section header

Implementation

import OnScroll from 'react-on-scroll';

class Sticky extends React.Component {
    state = {
        sticky: false,
    };

    setSticky = sticky => this.setState({ sticky });

    render() {
        const { title, children } = this.props;
        const { sticky } = this.state;
        return (
            <OnScroll
                className="section"
                triggers={[
                    { top: 50, bottom: -50, callback: visible => this.setSticky(visible) },
                ]}
            >
                <div>
                    <div className={`title ${sticky ? 'sticky' : 'inline'}`}>
                        <h2>{title}</h2>
                    </div>
                    <div className="content">{children}</div>
                </div>
            </OnScroll>
        );
    }
}

export default Sticky;

Usage

<Sticky title="Section title">
    content
</Sticky>
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free