Version: Next

use-fork-ref

About#

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

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#

Note: Credit of this hook goes to material-ui

Source

Join Bhargav's discord server#

You can click on the floating discord icon at the bottom right of the screen and talk to us in our server.

Last updated on by imbhargav5