https://github.com/rusinovanton/react-scrollreveal

React wrapper for scrollreveal lib
https://github.com/rusinovanton/react-scrollreveal

animation react react-scroll scrolling scrollreveal ux

Last synced: 19 days ago
JSON representation

React wrapper for scrollreveal lib

• Host: GitHub
• URL: https://github.com/rusinovanton/react-scrollreveal
• Owner: RusinovAnton
• Created: 2017-07-30T17:05:20.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-11-04T19:10:58.000Z (about 6 years ago)
• Last Synced: 2024-10-19T20:35:22.085Z (28 days ago)
• Topics: animation, react, react-scroll, scrolling, scrollreveal, ux
• Language: JavaScript
• Homepage: https://rusinovanton.github.io/react-scrollreveal/
• Size: 883 KB
• Stars: 16
• Watchers: 2
• Forks: 1
• Open Issues: 8
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# REACT-SCROLLREVEAL

React high order component that provides [scrollreveal](https://github.com/jlmakes/scrollreveal) functionality

## Usage

- Install `npm i --save react-scrollreveal`

- Wrap component with HOC

```javascript

import React from 'react'

import withScrollReveal from 'react-scrollreveal'

class MyComponent extends React.Component {

  render() {

    const { animationContainerReference } = this.props;

    

    return (

      


        ...

      

    )

  }

}


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](https://github.com/jlmakes/scrollreveal#2-configuration)  

  interval {number} - interval in milliseconds to create [animation sequence](https://github.com/jlmakes/scrollreveal#3-advanced) 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