Intersection Observer Hooks

An easy to use intersection observer hooks based on IntersectionObserver API

Live Preview / Demo In Here

Installation

npm i @bakunya/intersectionobserver-hooks

Basic Usage

useIntersectionOpserver accept 3 parameters

• ref, this is reference of components that will be watche by observer api
• options, this is options for pass on IntersectionObserver constructor
• callback, this is function which is called when the percentage of the target element is visible crosses a threshold.

Note

• Callback parameters must be function that wrapped on useCallback for avoid rerender
• Callback have 3 params, that is observer, entries, and ref
  • observer, the IntersectionObserver for which the callback is being invoked.
  • entries, an array of IntersectionObserverEntry objects, each representing one threshold which was crossed, either becoming more or less visible than the percentage specified by that threshold.
  • ref, ref component that passed on useIntersectionObserver()

const ref = useRef()
const options = useRef({
    root: null,
    rootMargin: '0px',
    threshold: 0
})

useIntersectionObserver(
    ref,
    options, 
    useCallback((observer, entries, ref) => {
    
        // some code
        
    }, [ //some dependencies ])
)

return <p ref={ref} className='m-5 my-[50vh'>{itm}</p>

Another Example

You can check another example in here

License

This project under MIT License.

Support Developer

You can support developer in Here. Thank you.