| 123456789101112131415161718192021222324252627282930313233343536373839404142434445 |
- import { useCombineMotionValues } from './use-combine-values.mjs';
- import { isMotionValue } from './utils/is-motion-value.mjs';
- /**
- * Combine multiple motion values into a new one using a string template literal.
- *
- * ```jsx
- * import {
- * motion,
- * useSpring,
- * useMotionValue,
- * useMotionTemplate
- * } from "framer-motion"
- *
- * function Component() {
- * const shadowX = useSpring(0)
- * const shadowY = useMotionValue(0)
- * const shadow = useMotionTemplate`drop-shadow(${shadowX}px ${shadowY}px 20px rgba(0,0,0,0.3))`
- *
- * return <motion.div style={{ filter: shadow }} />
- * }
- * ```
- *
- * @public
- */
- function useMotionTemplate(fragments, ...values) {
- /**
- * Create a function that will build a string from the latest motion values.
- */
- const numFragments = fragments.length;
- function buildValue() {
- let output = ``;
- for (let i = 0; i < numFragments; i++) {
- output += fragments[i];
- const value = values[i];
- if (value) {
- output += isMotionValue(value) ? value.get() : value;
- }
- }
- return output;
- }
- return useCombineMotionValues(values.filter(isMotionValue), buildValue);
- }
- export { useMotionTemplate };
|