Is there a way to add a watcher for options?

[SilencerWeb]

Is your feature request related to a problem? Please describe.
I'm using useInView hook and passing different options based on window width. The problem, that at first I pass a value but then change it to b and useInView hook is not watching for this change, it's using the options that were passed at the very first time.

Describe the solution you'd like
Would be incredible to watch for options change

Describe alternatives you've considered
Right now as I understand the only way is to call useInView hook 2 times and decide what ref to use like this:

  const [animationVisibilityRef, isInView] = useInView({
    triggerOnce: true,
    threshold: 0.6,
  });

  const [animationVisibilityRefMd, isInViewMd] = useInView({
    triggerOnce: true,
    threshold: 0.2,
  });

[thebuilder]

How are you passing the options? The hook handles updating the values.

[SilencerWeb]

@thebuilder thanks for a quick reply! I've passed them like this:

  const [animationVisibilityRef, isInView] = useInView({
    triggerOnce: true,
    threshold: isMd ? 0.2 : 0.6,
  });

Also, tried like this:

  const [animationVisibilityRef, isInView] = useInView(isMd ? {
    triggerOnce: true,
    threshold: 0.2,
  } : {
    triggerOnce: true,
    threshold: 0.6,
  });

[thebuilder]

How are you getting isMd?

[SilencerWeb]

I'm using gatsby-plugin-breakpoints plugin for Gatsby to determine media breakpoint and decide what threshold to use. For MD and lower I want to set threshold to 0.2 and for other breakpoints, I want to set threshold to 0.6

The call basically is const breakpoints = useBreakpoint();

And usage breakpoints.isMd. I just decided to simplify the example and use just isMd

[thebuilder]

Can you log out the entry from the hook, and check what threshold it hits?

[SilencerWeb]

Sure, here it is:

If you are interested, I can create a minimal repo with a reproduction example for this

[thebuilder]

The thing is, it recreates the observer callback ref when you change any of the exposed options:
https://github.com/thebuilder/react-intersection-observer/blob/master/src/useInView.tsx#L90

How are you assigning the ref itself? The behaviour you are seeing shouldn't be possible, so kinda need to dig into where it could break. Can you try debugging the code locally? See if it creates a new observer instance, etc.

[SilencerWeb]

Sure, I will get back to you in a while

[lnikell]

@thebuilder thank you for reply. I think SilencerWeb trying to get understanding how can we use a single useInView hook, but have a dynamic threshold value based on the current viewport size.

The problem I'm trying to solve is the following.
I use react intersection observer to trigger animations when do they appear in the viewport. Sometimes there are cases whether the same section looks a little bit different on mobile and desktop, so ideally i'd like to use different threshold options based on the window size. For example I want to have threshold 0.2 for 1200+ width and 0.6 for 320+ width.
Is it possible to pass different options to useInView and kinda reinitialise it after the state is changing.

Eg.

  const isMd = window.matchMedia('(max-width: 1200px)');
  const [animationVisibilityRef, isInView] = useInView({
    triggerOnce: true,
    threshold: isMd ? 0.2 : 0.6,
  });

[thebuilder]

  const isMd = window.matchMedia('(max-width: 1200px)');
  const [animationVisibilityRef, isInView] = useInView({
    triggerOnce: true,
    threshold: isMd ? 0.2 : 0.6,
  });

Is that a pseduo example, or real code? You shouldn't get values from window outside of a useEffect - This will not work if you expect it to toggle the hook when resizing the browser.

Otherwise it shouldn't be a problem to change the threshold dynamic. The library is built it handle it elegantly. In the storybook demo you can adjust all the options, and the hook rerenders correctly.

https://react-intersection-observer.vercel.app/?path=/story/useinview-hook--basic

[SilencerWeb]

@thebuilder it's almost real code :)

For checking the media, we use useMedia hook from react-use. Here is the code of the hook. Shouldn't it work as expected?

[thebuilder]

Can you recreate the issue in a Code Sandbox?

[thebuilder]

I'm closing this for now, since it shouldn't be an issue - Add a reproducible demo, and we can have look at it.