framer-motion
Version:
A simple and powerful JavaScript animation library
1 lines • 1.84 kB
Source Map (JSON)
{"version":3,"file":"use-combine-values.mjs","sources":["../../../src/value/use-combine-values.ts"],"sourcesContent":["\"use client\"\n\nimport { cancelFrame, frame, MotionValue } from \"motion-dom\"\nimport { useIsomorphicLayoutEffect } from \"../utils/use-isomorphic-effect\"\nimport { useMotionValue } from \"./use-motion-value\"\n\nexport function useCombineMotionValues<R>(\n values: MotionValue[],\n combineValues: () => R\n) {\n /**\n * Initialise the returned motion value. This remains the same between renders.\n */\n const value = useMotionValue(combineValues())\n\n /**\n * Create a function that will update the template motion value with the latest values.\n * This is pre-bound so whenever a motion value updates it can schedule its\n * execution in Framesync. If it's already been scheduled it won't be fired twice\n * in a single frame.\n */\n const updateValue = () => value.set(combineValues())\n\n /**\n * Synchronously update the motion value with the latest values during the render.\n * This ensures that within a React render, the styles applied to the DOM are up-to-date.\n */\n updateValue()\n\n /**\n * Subscribe to all motion values found within the template. Whenever any of them change,\n * schedule an update.\n */\n useIsomorphicLayoutEffect(() => {\n const scheduleUpdate = () => frame.preRender(updateValue, false, true)\n const subscriptions = values.map((v) => v.on(\"change\", scheduleUpdate))\n\n return () => {\n subscriptions.forEach((unsubscribe) => unsubscribe())\n cancelFrame(updateValue)\n }\n })\n\n return value\n}\n"],"names":[],"mappings":";;;;;AAMgB;AAIZ;;AAEG;AACH;AAEA;;;;;AAKG;AACH;AAEA;;;AAGG;AACH;AAEA;;;AAGG;;AAEC;;AAGA;;;AAGA;AACJ;AAEA;AACJ;;"}