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

[bitttttten]

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 👀

[zeusdeux]

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]
}

[zeusdeux]

Did this solution work for you @bitttttten? If so, I'd love to close this issue. If not, I am down to discuss and solve it differently.

[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.

[bitttttten]

The only other improvement would be to add this natively or include it in the library:

import useIsInViewportOnce from 'use-is-in-viewport/once'

And if you don't want to do to that, then no worries and there's nothing more to discuss we can close the issue.

[zeusdeux]

Glad your use case was tackled! We can revisit exposing it from this package itself once more requests for it show up!

[zeusdeux]

I have gone ahead and added it as an example in the readme as a first step.

[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

[zeusdeux]

@fcabanasm Ah yeah I was missing a useEffect in there. Here's a working one.

function useClampedIsInViewport(options) {
  const [isInViewport, ...etc] = useIsInViewport(options)
  const [wasInViewportAtleastOnce, setWasInViewportAtleastOnce] = React.useState(isInViewport)

  React.useEffect(() => {
    setWasInViewportAtleastOnce((prev) => {
      // this will clamp it to the first true
      // received from useIsInViewport
      if (!prev) {
        return isInViewport
      }
      return prev
    })
  }, [isInViewport])

  return [wasInViewportAtleastOnce, ...etc]
}