react-use/docs/useEnsuredForwardedRef.md
2019-10-25 16:32:39 +02:00

64 lines
1.7 KiB
Markdown

# `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
```jsx
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
```jsx
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
```ts
ensuredForwardRef<T, P = {}>(Component: RefForwardingComponent<T, P>): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
useEnsuredForwardedRef<T>(ref: React.MutableRefObject<T>): React.MutableRefObject<T>;
```