A React hook combining multiple refs into one ref.
npm install use-ref-with-forwardinguseRefWithForwarding() is a simple React hook that can be used to combine multiple refs into one ref.
Use your favourite manager to install the package:
``sh`
yarn add use-ref-with-forwarding
`sh`
npm install use-ref-with-forwarding --save
`ts
import React, { Ref, useEffect } from "react";
import { useRefWithForwarding } from "use-ref-with-forwarding";
export function Example({
outerRef1,
outerRef2,
}: {
outerRef1: Ref
outerRef2: Ref
}) {
const innerRef = useRefWithForwarding
outerRef1,
outerRef2,
]);
useEffect(() => {
console.log(innerRef.current);
});
return
;Reference
The hook is a generic with the following generic parameter:
-
: The value type of the reference.The hook function accepts the following function parameters:
-
initialValue: Value: The value used to initialize the reference.
- refs: (((value: Value) => void) | { readonly current: Value; } | { current: Value; } | null | undefined)[]: A list of references to which a reference update is passed.It returns a reference object of the following type:
{ (node: Value): void; current: Value; }License
This library is licensed under the MIT license.
Contributing
We welcome contributions to the