react-scrollreveal

    1.2.0 • Public • Published

    REACT-SCROLLREVEAL

    React high order component that provides scrollreveal functionality

    Usage

    • Install npm i --save react-scrollreveal
    • Wrap component with HOC
    import React from 'react'
    import withScrollReveal from 'react-scrollreveal'
     
    class MyComponent extends React.Component {
      render() {
        const { animationContainerReference } = this.props;
        
        return (
          <div ref={animationContainerReference}>
            ...
          </div>
        )
      }
    }
     
    export default withScrollReveal([
      {
        selector: '.sr-item',
        options: {
          reset: true,
        },
      },
      {
        selector: '.sr-item--sequence',
        options: {
          reset: true,
          delay: 400,
        },
        interval: 100
      }
    ])(MyComponent) 
    • ???
    • PROFIT

    Reference

    withScrollReveal HOC arguments.
    You have to provide object or array of objects with shape that described bellow:

    {
    selector {string} - css selector to get DOM nodes that init scrollreveal on
    options {object} - scrollreveal configuration
    interval {number} - interval in milliseconds to create animation sequence for selected elements
    }

    Wrapped component props:

    • animationContainerReference {function} - you have to set reference of your animated elements' container
    • destroyRevealAnimation {function} - remove all styles, event listeners
    • refreshRevealAnimation {function} - reset all styles for all sr elements

    Install

    npm i react-scrollreveal

    DownloadsWeekly Downloads

    23

    Version

    1.2.0

    License

    GPL-3.0

    Unpacked Size

    267 kB

    Total Files

    25

    Last publish

    Collaborators

    • rusinov