react-on-scroll

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>