visibl v1.1.2

visibl

In-viewport detection via React HOC.

Usage

import React from 'react'
import { render } from 'react-dom'
import visibl from 'visibl'

const Component = React.forwardRef((props, ref) => {
  return (
    <h1 ref={ref}>I am {props.visible ? 'visible :)' : 'not visible :('}</h1>
  )
})

const TrackedComponent = visibl(Component)

function App () {
  return (
    <TrackedComponent />
  )
}

render(<App />, document.body)

Adjusting Threshold

A fraction of the viewport height. Positive values makes image load sooner, negative values makes image load later.

<TrackedComponent threshold={0.2} />

License

MIT License © Eric Bailey