mirror of
https://github.com/streamich/react-use.git
synced 2025-12-08 18:02:14 +00:00
64 lines
1.7 KiB
Markdown
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>;
|
|
```
|