Skip to main content
Version: v3.6.0

@rooks/use-fork-ref

A hook that can combine two refs(mutable or callbackRefs) into a single callbackRef

Note: Credit of this hook goes to material-ui

Build Status

Installation

npm install --save @rooks/use-fork-ref

Importing the hook

import useForkRef from "@rooks/use-fork-ref"

Usage

function Demo() {
const [isVisible, setIsVisible] = useState(false);
const callback = entries => {
if (entries && entries[0]) {
setIsVisible(entries[0].isIntersecting);
}
};
const [myIntersectionObserverRef] = useIntersectionObserverRef(callback);
const [
myBoundingclientrectRef,
boundingclientrect
] = useBoundingclientrectRef();
const myRef = useForkRef(myIntersectionObserverRef, myBoundingclientrectRef);
const displayString = JSON.stringify(boundingclientrect, null, 2);
return (
<>
<div
style={{
position: "fixed",
top: 0,
right: 0
}}
>
<h1>Is rectangle visible - {String(isVisible)}</h1>
</div>
<div style={{ height: 2000 }}></div>
<div ref={myRef} style={{ height: 300, background: "lightblue" }}>
<p>Boundingclientrect</p>
<pre>{displayString}</pre>
</div>
<div style={{ height: 2000 }}></div>
</>
);
}

render(<Demo/>)

Arguments

Argument valueTypeDescription
ref2Callback/Mutable refFirst ref
ref1Callback/Mutable refSecond ref

Returns

Return valueTypeDescriptionDefault value
refCallback refA callback ref function that can internally combines both the refs from the arguments() => null

Original source

Source