Using multiple refs on a single React element

Question

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

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

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.

Could you wrap the hoverRef in a dragRef component and forward the hoverRef to a child element? — ray
– ray, Commented Feb 17, 2020 at 21:37

doc-han · Accepted Answer · 2024-05-28 13:06:51Z

42

A simple way to go about this is documented below.

Note: the ref attribute on elements takes a function and this function is later called with the element or node when available.

function App() {
  const myRef = useRef(null);

  return (
    <div ref={myRef}>
    </div>
  );
}

Hence, myRef above is a function with definition

function(element){
 // something done here
}

So a simple solution is like below

function App() {
  const myRef = useRef(null);
  const anotherRef = useRef(null);

  return (
    <div ref={(el)=> {myRef(el); anotherRef(el);}}>
    </div>
  );
}

Note: Check out the react docs on ref-callbacks. Thanks

edited May 28, 2024 at 13:06

answered Jun 6, 2022 at 15:12

doc-han

76610 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Hillsie Over a year ago

Thanks. The simple solution is what I needed. A TypeScript variation ref={((el: HTMLDivElement) => setNodeRef(el)) && ref}

Hillsie Over a year ago

@MiguelJara The TypeScript part is the el: HTMLDivElement the && is a logical and shortcut. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

holem Over a year ago

Uncaught TypeError: myRef is not a function. Use myRef.current = el instead.

ddblair Over a year ago

@holem current is a read-only property.

lonewarrior556 Over a year ago

What works great? nothing in this answer or comments work. Is this an old React version?

|

TimoStaudinger · Accepted Answer · 2020-02-17 21:39:07Z

22

A React ref is really nothing but a container for some mutable data, stored as the current property. See the React docs for more details.

{
  current: ... // my ref content
}

Considering this, you should be able to sort this out by hand:

function App() {
  const myRef = useRef(null);

  const [hoverRef, isHovered] = useHover();
  const [dragRef, isDragging] = useDrag();

  useEffect(function() {
    hoverRef.current = myRef.current;
    dragRef.current = myRef.current;
  }, [myRef.current]);

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

answered Feb 17, 2020 at 21:39

TimoStaudinger

42.7k16 gold badges91 silver badges96 bronze badges

2 Comments

Nikola Mihajlović Over a year ago

Correct idea, but assigning to a ref won't cause a render, so useEffect will not get called properly. The assignment should happen in the callback instead.

Hasibur Rahman Over a year ago

Typescript doesn't like it. Cannot assign to 'current' because it is a read-only property.ts(2540)

Roman86 · Accepted Answer · 2023-06-09 17:16:20Z

21

I use TypeScript and it doesn't let easily assign .current of refs created with useRef or forwarded ones (because it can be a RefCallback also). So I made a function that smartly merges all given refs into one RefCallback for clean/simple use. Check this out. Works great for me.

import { type MutableRefObject, type RefCallback } from 'react';

type MutableRefList<T> = Array<RefCallback<T> | MutableRefObject<T> | undefined | null>;

export function mergeRefs<T>(...refs: MutableRefList<T>): RefCallback<T> {
  return (val: T) => {
    setRef(val, ...refs);
  };
}

export function setRef<T>(val: T, ...refs: MutableRefList<T>): void {
  refs.forEach((ref) => {
    if (typeof ref === 'function') {
      ref(val);
    } else if (ref != null) {
      ref.current = val;
    }
  });
}

usage example

interface Props {
  // I pass it as a prop, you may use forwardRef - also supported by mergeRefs
  inputRef?: Ref<HTMLInputElement>;
}

export function Input({
  inputRef,
}: Props): ReactElement {
  // some local ref
  const privateRef = useRef<HTMLInputElement>(null);

  return (
    <input
      type="text"
      ref={mergeRefs(inputRef, privateRef)}
      // ... your other stuff
    />
  );
}

edited Jun 9, 2023 at 17:16

answered Jun 9, 2023 at 14:09

Roman86

2,35927 silver badges28 bronze badges

2 Comments

phyatt Over a year ago

This didn't work with the ref-like value for useAutoAnimate from formkit. The type of its ref is (instance: Element | null) => void. It ended up causing an infinite loop in setRef above. The accepted answer worked though.

digitalifeforms Over a year ago

Incredibly helpful answer and amazing solution. Hard to believe it works so well!

Dante · Accepted Answer · 2024-06-20 23:30:47Z

2

Apparently all the answers here are not correct, but actually they just need a little tweak:

const firstRef = useRef(null);
const secondRef = useRef(null);

<div ref={(node) => {
  fisrtRef.current = node;
  secondRef.current = node;
}}></div>

answered Jun 20, 2024 at 23:30

Dante

8802 gold badges10 silver badges27 bronze badges

Comments

dani24 · Accepted Answer · 2023-03-09 16:09:31Z

0

Follwing what @Doc-Han is saying, if you ever need a reference AND also a form register for an input you can do something like this:

function App() {
  const myRef = useRef(null);
  const { register } = useForm({ defaultValues });

  const setRefs = useCallback((element) => {
    myRef.current = element;
    register({ required: 'First name is required.' })(element);
  }, [myRef, register]);

  return (
    <input ref={setRefs} />
  );
}

answered Mar 9, 2023 at 16:09

dani24

2,2982 gold badges29 silver badges31 bronze badges

Collectives™ on Stack Overflow

Using multiple refs on a single React element

5 Answers 5

9 Comments

2 Comments

usage example

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

9 Comments

2 Comments

usage example

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related