@wordpress/compose
Version:
WordPress higher-order components (HOCs).
46 lines • 1.77 kB
TypeScript
/**
* Merges refs into one ref callback.
*
* It also ensures that the merged ref callbacks are only called when they
* change (as a result of a `useCallback` dependency update) OR when the ref
* value changes, just as React does when passing a single ref callback to the
* component.
*
* As expected, if you pass a new function on every render, the ref callback
* will be called after every render.
*
* If you don't wish a ref callback to be called after every render, wrap it
* with `useCallback( callback, dependencies )`. When a dependency changes, the
* old ref callback will be called with `null` and the new ref callback will be
* called with the same value.
*
* To make ref callbacks easier to use, you can also pass the result of
* `useRefEffect`, which makes cleanup easier by allowing you to return a
* cleanup function instead of handling `null`.
*
* It's also possible to _disable_ a ref (and its behaviour) by simply not
* passing the ref.
*
* ```jsx
* const ref = useRefEffect( ( node ) => {
* node.addEventListener( ... );
* return () => {
* node.removeEventListener( ... );
* };
* }, [ ...dependencies ] );
* const otherRef = useRef();
* const mergedRefs useMergeRefs( [
* enabled && ref,
* otherRef,
* ] );
* return <div ref={ mergedRefs } />;
* ```
*
* @template {import('react').Ref<any>} TRef
* @param {Array<TRef>} refs The refs to be merged.
*
* @return {import('react').RefCallback<TypeFromRef<TRef>>} The merged ref callback.
*/
export default function useMergeRefs<TRef extends import("react").Ref<any>>(refs: Array<TRef>): import("react").RefCallback<TypeFromRef<TRef>>;
export type TypeFromRef<T> = T extends import("react").Ref<infer R> ? R : never;
//# sourceMappingURL=index.d.ts.map