@bakunya/intersectionobserver-hooks

0.1.2 • Public • Published

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.

Package Sidebar

Install

npm i @bakunya/intersectionobserver-hooks

Weekly Downloads

0

Version

0.1.2

License

MIT

Unpacked Size

4.62 kB

Total Files

5

Last publish

Collaborators

  • bakunya