useEnsuredForwardedRef.md

useEnsuredForwardedRef

React hook to use a ForwardedRef safely.

In some scenarios, you may need to use a ref from inside and outside a component. If that's the case, you should use React.forwardRef to pass it through the child component. This is useful when you only want to forward that ref and expose an internal HTMLelement to a parent component, for example. However, if you need to manipulate that reference inside a child's lifecycle hook... things get complicated, since you can't always ensure that the ref is being sent by the parent component and if it is not, you will get undefined instead of a valid ref.

This hook is useful in this specific case, it will ensure that you get a valid reference on the other side.

Usage

import {ensuredForwardRef} from 'react-use';

const Demo = () => {
  return (
    <Child />
  );
};

const Child = ensuredForwardRef((props, ref) => {
  useEffect(() => {
    console.log(ref.current.getBoundingClientRect())
  }, [])

  return (
    <div ref={ref} />
  );
});

Alternative usage

import {useEnsuredForwardedRef} from 'react-use';

const Demo = () => {
  return (
    <Child />
  );
};

const Child = React.forwardRef((props, ref) => {
  // Here `ref` is undefined
  const ensuredForwardRef = useEnsuredForwardedRef(ref);
  // ensuredForwardRef will always be a valid reference.

  useEffect(() => {
    console.log(ensuredForwardRef.current.getBoundingClientRect())
  }, [])

  return (
    <div ref={ensuredForwardRef} />
  );
});

Reference

ensuredForwardRef<T, P = {}>(Component: RefForwardingComponent<T, P>): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;

useEnsuredForwardedRef<T>(ref: React.MutableRefObject<T>): React.MutableRefObject<T>;