UNPKG

939 BJavaScriptView Raw
1import { useMemo } from 'react';
2
3var toFnRef = function toFnRef(ref) {
4 return !ref || typeof ref === 'function' ? ref : function (value) {
5 ref.current = value;
6 };
7};
8
9export function mergeRefs(refA, refB) {
10 var a = toFnRef(refA);
11 var b = toFnRef(refB);
12 return function (value) {
13 if (a) a(value);
14 if (b) b(value);
15 };
16}
17/**
18 * Create and returns a single callback ref composed from two other Refs.
19 *
20 * ```tsx
21 * const Button = React.forwardRef((props, ref) => {
22 * const [element, attachRef] = useCallbackRef<HTMLButtonElement>();
23 * const mergedRef = useMergedRefs(ref, attachRef);
24 *
25 * return <button ref={mergedRef} {...props}/>
26 * })
27 * ```
28 *
29 * @param refA A Callback or mutable Ref
30 * @param refB A Callback or mutable Ref
31 * @category refs
32 */
33
34function useMergedRefs(refA, refB) {
35 return useMemo(function () {
36 return mergeRefs(refA, refB);
37 }, [refA, refB]);
38}
39
40export default useMergedRefs;
\No newline at end of file