import { MotionValue } from 'framer-motion' import { startTransition, useState } from 'react' import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect' type UnwrapMotionValue = T extends MotionValue ? U : T type UnwrapMotionValues = T extends [infer Head, ...infer Tail] ? [UnwrapMotionValue, ...UnwrapMotionValues] : [] export function useMotionSelector( motionValues: readonly [...T], effect: (v: UnwrapMotionValues) => R, ) { const calcEffect = () => effect(motionValues.map((v) => v.get()) as UnwrapMotionValues) const [result, setResult] = useState(calcEffect) useIsomorphicLayoutEffect(() => { const set = () => startTransition(() => setResult(calcEffect)) setResult(calcEffect) const unsubscribers = motionValues.map((motionValue) => motionValue.on('change', set)) return () => unsubscribers.forEach((unsubscribe) => unsubscribe()) // eslint-disable-next-line react-hooks/exhaustive-deps }, [motionValues]) return result }