Skip to content
In-viewport detection via React HOC.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
README.md
index.js
package-lock.json
package.json

README.md

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

You can’t perform that action at this time.