SeonHyungJo/use-intersect

🥂Easy use Intersect Hooks

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