How to observe only when element is in view, and not when it goes out of view?

I would like just to track when the element comes into view, and keep the boolean true for the rest of the session duration. At the moment the library toggles back and forth. Is it possible to do it?

I dug into your options and the options in observe-element-in-viewport and I couldn’t find anything 👀

[bitttttten]

Ah sorry, I did something very similar I just extended your example. Something like this:

import { useEffect, useState } from 'react'
import useIsInViewport, { CallbackRef, HookOptions } from 'use-is-in-viewport'

export const useHasBeenInViewportOnce = (
    options?: HookOptions,
): [boolean, CallbackRef, CallbackRef] => {
    const [isInViewport, ref, viewportRef] = useIsInViewport(options)
    const [hasBeenInViewportOnce, setHasBeen] = useState(false)

    useEffect(() => {
        if (isInViewport && !hasBeenInViewportOnce) {
            setHasBeen(true)
        }
    }, [isInViewport, options, hasBeenInViewportOnce])

    return [hasBeenInViewportOnce, ref, viewportRef]
}

But yes, my problem was solved! So we can close it.

[fcabanasm]

You can (somewhat) approximate this via by using the await isInViewport(target) format. I wouldn’t recommend it though has that would meet your usecase only if the element was already outside the viewport to begin with.

Instead, while this hook doesn’t support it natively, you can build a custom hook based on this hook to do so as shown below —

import { useState } from 'react'
import useIsInViewport from 'use-is-in-viewport'

function useClampedIsInViewport(options) {
  const [isInViewport, ...etc] = useIsInViewport(options)
  const [wasInViewportAtleastOnce, setWasInViewportAtleastOnce] = useState(isInViewport)
  
  setWasInViewportAtleastOnce(prev => {
    // this will clamp it to the first true
    // received from useIsInViewport
    if (!prev) {
      return isInViewport
    }
    return prev
  })

  return [wasInViewportAtleastOnce, ...etc]
}

its actually does not working 😦. But @bitttttten example did it