Add support for useRef

[jantimon]

Similar libraries allow to reuse a ref object for multiple hooks for example useComponentSize.
Those libraries use an official api from facebook: https://reactjs.org/docs/hooks-reference.html#useref

For your plugin usage might look like the following example:

const ref = useRef(null)
const [_, inView] = useInView({ref})
return <span ref={ref}>...</span>

One example for such an implementation is useComponentSize:

https://github.com/rehooks/component-size/blob/c0abcb9702f173cd5d52710af8604b29f2fbac17/index.js#L18

Could you please add this to your plugin?
My usecase is that I want to know the size of an component and if it is inviewport.

[thebuilder]

This is a tricky issue. I originally made the Hook so you pass it a ref. This however had a few issues #162 #169 - Because the useRef doesn't trigger a change in useEffect, it would break if it wasn't set during the first render. The recommended solution is to use a ref callback, instead of the ref object.

See this blog post: https://medium.com/@teh_builder/ref-objects-inside-useeffect-hooks-eb7c15198780

I think you might be able to solve it by creating your own callback method.

const ref = useRef(null)
const [inViewRef, inView] = useInView()

function handleRef(node) {
  inViewRef(node);
  ref.current = node;
}

return <span ref={handleRef}>...</span>

(This is completely untested)

[thebuilder]

So i just tried this out, and it works fine - that'll be my recommended approach for this specific use case. Does it work for you?

function Component() {
  const [sizeRef, size] = useElementSize()
  const [inViewRef, inView] = useInView()

  function handleRef(node: HTMLElement | null) {
    sizeRef(node)
    inViewRef(node)
  }

  return <div ref={handleRef}>👋</div>
}

[kuworking]

It definitively works for me, thanks!

*The code here is clearer than the one in the readme, IMHO

[angelolucas]

So i just tried this out, and it works fine - that'll be my recommended approach for this specific use case. Does it work for you?

function Component() {
  const [sizeRef, size] = useElementSize()
  const [inViewRef, inView] = useInView()

  function handleRef(node: HTMLElement | null) {
    sizeRef(node)
    inViewRef(node)
  }

  return <div ref={handleRef}>👋</div>
}

It looks like this logic creates an infinite loop. See here

[thebuilder]

See the FAQ section in the readme: https://github.com/thebuilder/react-intersection-observer#how-can-i-assign-multiple-refs-to-a-component

You'll need useCallback to ensure it memorizes the function.