Repository files navigation

Thinkreact-intersection-observer, but with more features.

react-intersection-revealer is a easy-to-use React hook that tells you whether a component/element is visible on the viewport currently, and if yes, how much of it is visible. The stats get updated when a relevant event occurs.

Installing is easy. Do it like any other package.

npm install --save react-intersection-revealer

This example below is enough to get you started on how to usereact-intersection-revealer.

importReact,{useRef}from'react'import{useIntersectionRevealer}from'react-intersection-revealer'exportdefaultfunctionYourAwesomeComponent(){constref=useRef()const{heightVisible}=useIntersectionRevealer(ref)return(<><divclassName="need-to-track"ref={ref}>...</div><p>{`${heightVisible}px (height) of the tracked element is on screen`}</p></>)}

Here's ademo to showreact-intersection-revealer's capabilities.

TheuseIntersectionRevealer hook provides you with 13 states that hold stats of the target element:

• inView(Boolean): True if the element is visible, even if only partially. False otherwise.
• visibleFractionX(Decimal): Fraction of the element's width which is visible; range: [0,1].
• visibleFractionY(Decimal): Fraction of the element's height which is visible; range: [0,1].
• height(Decimal): The element's height, in pixels.
• width(Decimal): The element's width, in pixels.
• heightVisible(Decimal): The width (pixels) of the element's height which is visible.
• widthVisible(Decimal): The width (pixels) of the element's width which is visible.
• x(Decimal): The x coordinate (pixels) of the element from origin where it's rendered.
• y(Decimal): The y coordinate (pixels) of the element from origin where it's rendered.
• scrollX(Decimal): The amount of the element that was scrolled passed by, along x-axis.
• scrollXProgress(Decimal): The fraction of the amount of the element that was scrolled passed by, along x-axis; range: [0,1].
• scrollY(Decimal): The amount of the element that was scrolled passed by, along y-axis.
• scrollYProgress(Decimal): The fraction of the amount of the element that was scrolled passed by, along y-axis; range: [0,1].

These stats get updated on any of these events:

• Viewport resize(window - onresize)
• Page scroll(window - onscroll)
• Parent element scroll(parentElement - onscroll)
• Target element's transition-end(targetElement - ontransitionend)
• Parent element's transition-end(parentElement - ontransitionend)

The hook requires a reference to the element to be tracked. Use theuseRef hook (from React), get a reference, and pass it to both theuseIntersectionRevealer hook and the element/component you want to track.

That's all you need to do.

Take a look at thedemo site, andits source code to get an idea.

MIT ©captain-woof

Sohail Saha (aka CaptainWoof)

Please consider supporting me if you find this package useful in your work.