1 line
1.6 KiB
Plaintext
1 line
1.6 KiB
Plaintext
{"version":3,"file":"use-motion-template.mjs","sources":["../../../src/value/use-motion-template.ts"],"sourcesContent":["\"use client\"\n\nimport { isMotionValue, MotionValue } from \"motion-dom\"\nimport { useCombineMotionValues } from \"./use-combine-values\"\n\n/**\n * Combine multiple motion values into a new one using a string template literal.\n *\n * ```jsx\n * import {\n * motion,\n * useSpring,\n * useMotionValue,\n * useMotionTemplate\n * } from \"framer-motion\"\n *\n * function Component() {\n * const shadowX = useSpring(0)\n * const shadowY = useMotionValue(0)\n * const shadow = useMotionTemplate`drop-shadow(${shadowX}px ${shadowY}px 20px rgba(0,0,0,0.3))`\n *\n * return <motion.div style={{ filter: shadow }} />\n * }\n * ```\n *\n * @public\n */\nexport function useMotionTemplate(\n fragments: TemplateStringsArray,\n ...values: Array<MotionValue | number | string>\n) {\n /**\n * Create a function that will build a string from the latest motion values.\n */\n const numFragments = fragments.length\n\n function buildValue() {\n let output = ``\n\n for (let i = 0; i < numFragments; i++) {\n output += fragments[i]\n const value = values[i]\n if (value) {\n output += isMotionValue(value) ? value.get() : value\n }\n }\n\n return output\n }\n\n return useCombineMotionValues(values.filter(isMotionValue), buildValue)\n}\n"],"names":[],"mappings":";;;;AAKA;;;;;;;;;;;;;;;;;;;;;AAqBG;;AAKC;;AAEG;AACH;AAEA;;AAGI;AACI;AACA;;AAEI;;;AAIR;;;AAIR;;"} |