Utilities & Refs
useForkRef
About
A hook that can combine two refs(mutable or callbackRefs) into a single callbackRef
Examples
import "./styles.css";
import {
useBoundingclientrectRef,
useForkRef,
useOutsideClickRef,
} from "rooks";
function App() {
const [outsideClickRef] = useOutsideClickRef(() => {
console.log("clicked outside");
});
const [
myBoundingclientrectRef,
boundingclientrect,
] = useBoundingclientrectRef();
const myRef = useForkRef(outsideClickRef, myBoundingclientrectRef);
return (
<div>
<h1>Rooks : useForkRef example </h1>
<div
ref={myRef}
style={{
background: "teal",
color: "white",
padding: 8,
margin: 4,
marginTop: 20,
}}
>
<p>
Click outside the box to see logs{" "}
{JSON.stringify(boundingclientrect, 1, 2)}
</p>
</div>
</div>
);
}
export default App;Arguments
| Argument value | Type | Description |
|---|---|---|
| ref2 | Callback/Mutable ref | First ref |
| ref1 | Callback/Mutable ref | Second ref |
Returns
| Return value | Type | Description | Default value |
|---|---|---|---|
| ref | Callback ref | A callback ref function that can internally combines both the refs from the arguments | () => null |
Original source
Note: Credit of this hook goes to material-ui