OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Using multiple refs on a single React element

  • Thread starter Thread starter Kieran
  • Start date Start date
K

Kieran

Guest
I'm using the useHover() react hook defined in this recipe. The hook returns a ref and a boolean indicating whether the user is currently hovering over element identified by this ref. It can be used like this...

Code:
function App() {
  const [hoverRef, isHovered] = useHover();

  return (
    <div ref={hoverRef}>
      {isHovered ? 'Hovering' : 'Not Hovering'}
    </div>
  );
}

Now let's say that I want to use another (hypothetical) hook called useDrag which returns a ref and a boolean indicating whether the user is dragging the current element around the page. I want to use this on the same element as before like this...

Code:
function App() {
  const [hoverRef, isHovered] = useHover();
  const [dragRef, isDragging] = useDrag();

  return (
    <div ref={[hoverRef, dragRef]}>
      {isHovered ? 'Hovering' : 'Not Hovering'}
      {isDragging ? 'Dragging' : 'Not Dragging'}
    </div>
  );
}

This won't work because the ref prop can only accept a single reference object, not a list like in the example above.

How can I approach this problem so I can use multiple hooks like this on the same element? I found a package that looks like it might be what I'm looking for, but I'm not sure if I'm missing something.

<p>I'm using the <code>useHover()</code> react hook defined in <a href="https://usehooks.com/useHover/" rel="noreferrer">this recipe</a>. The hook returns a <code>ref</code> and a boolean indicating whether the user is currently hovering over element identified by this <code>ref</code>. It can be used like this...</p>

<pre><code>function App() {
const [hoverRef, isHovered] = useHover();

return (
<div ref={hoverRef}>
{isHovered ? 'Hovering' : 'Not Hovering'}
</div>
);
}
</code></pre>

<p>Now let's say that I want to use another (hypothetical) hook called <code>useDrag</code> which returns a <code>ref</code> and a boolean indicating whether the user is dragging the current element around the page. I want to use this on the same element as before like this...</p>

<pre><code>function App() {
const [hoverRef, isHovered] = useHover();
const [dragRef, isDragging] = useDrag();

return (
<div ref={[hoverRef, dragRef]}>
{isHovered ? 'Hovering' : 'Not Hovering'}
{isDragging ? 'Dragging' : 'Not Dragging'}
</div>
);
}
</code></pre>

<p>This won't work because the <code>ref</code> prop can only accept a single reference object, not a list like in the example above. </p>

<p>How can I approach this problem so I can use multiple hooks like this on the same element? I found a <a href="https://github.com/smooth-code/react-merge-refs" rel="noreferrer">package</a> that looks like it might be what I'm looking for, but I'm not sure if I'm missing something.</p>
 

Latest posts

Online statistics

Members online
0
Guests online
3
Total visitors
3
Ads by Eonads
Top