react-visit

A react component which notifies when it has been visited on the page, used for infinite scrolling.

Install

npm install react-visit --save

Usage

Place the Visit component inside a container or component, and you can detect when your component has been visited, and initiate some actions on the visited event. This is useful for infinite scroll.

import Visit from 'react-visit'
import ReactDOM from 'react-dom'
import React, { Component, PropTypes } from 'react'

class TestComponent extends Component {

  handleVisit () {
    console.log('u visited me...')
  }

  handleLeave () {
    console.log('u left me...')
  }

  render () {
    /*
    Set a containerElement if you are scrolling in a container/modal
    let containerElement = document.querySelector('.container')
    */

    let visitStyle = {
       position: 'absolute',
       visibility: 'hidden',
       width: '100%',
       marginTop: '-10rem',
       height: '10rem'
    }

    var divStyle = {
      height: '50rem',
      marginTop: '10rem',
      backgroundColor: 'darkblue',
      position: 'relative'
    };

    return (
      <div style={divStyle}>
        { /* some items loaded with infinite scroll */}
        <Visit visitStyle={visitStyle}
               onVisit={ () => this.handleVisit() }
               onLeave={ () => this.handleLeave() } />
      </div>
    )
  }
}

ReactDOM.render(<TestComponent />, document.getElementById('root'))

Versions

Props

• onVisit()

function to call when the component has been visited. This runs when the visit component is visible in the viewport.

• onLeave()

function to call when the component has been un-visited. This runs when the visit component is no longer visible in the viewport.

• visitStyle

Style object to display the visit component, usually you want the visit component hidden, but may want to give it a margin bottom or negative margin bottom margin so it will be triggered early in the case of infinite scroll.

• containerElement

The dom element to set the scroll event on, e.g. document.querySelector('.container'). If no containerElement is set react-visit will attach the scroll event to window, which is usually what you want unless in the case of a modal.

• resetVisited Public function on the component to call via refs e.g. this.refs.visit.resetVisited() if you want to reset the visited state so you can revisit the component, for example after scrolling has added more items.

Development

npm install
npm run build
npm test
npm start

License

MIT