A react component which notifies when it has been visited on the page, used for infinite scrolling
npm install react-visitA react component which notifies when it has been visited on the page, used for infinite scrolling.
npm install react-visit --save
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.
``jsx
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 (
ReactDOM.render(
`
- 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.