use-intersect

React useIntersect Hooks

Install

npm install --save use-intersect

Usage

import * as React from 'react'
 
import useIntersect from 'use-intersect'
 
const option = {
  threshold: 0.8
}
 
const handleIntersect = (targetElement) ={
  console.log('intersect', targetElement)
}
 
const Example = () => {
 
  const targetRef = useIntersect(handleIntersect, {rootOptions: option, once:true})
 
  return (
    <img ref={targetRef}/>
  )
}

API

useIntersect

Prop	Type	Required	Description
onIntersect	Function	✓	Execute onItersect Function
IntersectOptions	IntersectOptions		Intersect option

IntersectOptions type

name	Type	Required	Description
rootOptions	ObserverOptions		ObserverOptions
once	boolean		[default:true] Trigger onItersect once

ObserverOptions type

name	Type	Required	Description
root	Element | null		root Element
rootMargin	string		Observer rootMargin
threshold	number		Observer threshold

[MDN]Reference

License

MIT © 🐭snyung