Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 3x 3x 3x 3x 2x 3x 1x 1x 1x 1x 3x 3x 3x 3x | import { useEffect, useRef, type Ref, type RefObject } from 'react';
/**
* Use this hook if you need to use the forwarded ref in a component that forwards its ref.
*
* @example
* const MyComponent = forwardRef((props, ref) => {
* const actualRef = useForwardedRef(ref);
*
* useEffect(
* () => console.log(actualRef.getBoundingClientRect()),
* );
*
* return (
* <div ref={actualRef} />
* );
* });
*
* @param ref - Reference.
* @returns Reference.
*/
export const useForwardedRef = <TRef = undefined>(ref?: Ref<TRef>): RefObject<TRef | null> => {
const innerRef = useRef<TRef>(null);
useEffect(() => {
if (!ref) return;
if (typeof ref === 'function') {
ref(innerRef.current ?? null);
} else {
ref.current = innerRef.current;
}
});
return innerRef;
};
|