All files / src/value use-motion-template.ts

100% Statements 13/13
100% Branches 2/2
100% Functions 2/2
100% Lines 11/11

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49  30x                                               30x   28x         8x     17x   17x 43x 43x 43x     17x     8x    
import { MotionValue } from "."
import { useCombineMotionValues } from "./use-combine-values"
 
/**
 * 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
 */
export function useMotionTemplate(
    fragments: TemplateStringsArray,
    ...values: MotionValue[]
) {
    /**
     * 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 += values[i].get()
        }
 
        return output
    }
 
    return useCombineMotionValues(values, buildValue)
}