scroll-decorator.jsx

import React, { Component } from "react"
import VisibilitySensor from "react-visibility-sensor"

const optsVisibily = {
  minTopValue: 400,
  partialVisibility: true,
  scrollDelay: 100
}

const WithScroll = WrapComponent =>
  class extends Component {
    constructor(props) {
      super(props)
      this.state = {
        visible: false
      }
    }

    handle = event => {
      if (event && !this.state.visible) {
        this.setState({
          visible: true
        })
      }
    }

    render() {
      return (
        <VisibilitySensor onChange={this.handle} {...optsVisibily}>
          <WrapComponent isVisible={this.state.visible} {...this.props} />
        </VisibilitySensor>
      )
    }
  }

export default WithScroll