| 1 | {"version":3,"file":"useComposedRef.js","sources":["../../../src/utils/useComposedRef.ts"],"sourcesContent":["import { Ref, useCallback } from 'react';\n\n/**\n * returns a function that composes multiple refs together.\n * This can be very useful when you have more hooks that create a ref\n * that shall be given to a DOM component, but the component only accepts\n * one ref!\n *\n * Example:\n *\n * ```\n * import { useMeasure } from 'react-use';\n * import { useDrop } from 'react-dnd';\n *\n * const MyComponent = () => {\n * const [measureRef, measure] = useMeasure<HTMLDivElement>();\n * const [_, dropRef] = useDrop({accept: 'TILE'});\n * const reactRef = useRef<HTMLDivElement>(null);\n *\n * const composedRef = useComposeRef(measureRef, dropRef, reactRef)\n *\n * return <div ref={composedRef}/>\n * }\n * ```\n * @param refs a list of refs that shall be composed together\n * @returns a new ref that shall be given to the component\n */\nexport const useComposeRef = <T extends HTMLElement>(...refs: Ref<T>[]) => {\n return useCallback((el: T | null) => {\n refs.forEach(ref => {\n if (ref) {\n if (typeof ref === 'function') ref(el);\n //@ts-ignore\n else ref.current = el;\n }\n });\n }, refs);\n};\n"],"names":[],"mappings":";;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;IAyBa,aAAa,GAAG;IAAwB,cAAiB;SAAjB,UAAiB,EAAjB,qBAAiB,EAAjB,IAAiB;QAAjB,yBAAiB;;IACpE,OAAO,WAAW,CAAC,UAAC,EAAY;QAC9B,IAAI,CAAC,OAAO,CAAC,UAAA,GAAG;YACd,IAAI,GAAG,EAAE;gBACP,IAAI,OAAO,GAAG,KAAK,UAAU;oBAAE,GAAG,CAAC,EAAE,CAAC,CAAC;;;oBAElC,GAAG,CAAC,OAAO,GAAG,EAAE,CAAC;aACvB;SACF,CAAC,CAAC;KACJ,EAAE,IAAI,CAAC,CAAC;AACX;;;;"} |
|---|
