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

100% Statements 14/14
100% Branches 2/2
100% Functions 3/3
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 3932x 32x 32x 32x                                     32x 254x             254x 254x 4x 4x     254x    
import { useContext, useEffect, useState } from "react"
import { motionValue, MotionValue } from "."
import { MotionConfigContext } from "../context/MotionConfigContext"
import { useConstant } from "../utils/use-constant"
 
/**
 * Creates a `MotionValue` to track the state and velocity of a value.
 *
 * Usually, these are created automatically. For advanced use-cases, like use with `useTransform`, you can create `MotionValue`s externally and pass them into the animated component via the `style` prop.
 *
 * ```jsx
 * export const MyComponent = () => {
 *   const scale = useMotionValue(1)
 *
 *   return <motion.div style={{ scale }} />
 * }
 * ```
 *
 * @param initial - The initial state.
 *
 * @public
 */
export function useMotionValue<T>(initial: T): MotionValue<T> {
    const value = useConstant(() => motionValue(initial))
 
    /**
     * If this motion value is being used in static mode, like on
     * the Framer canvas, force components to rerender when the motion
     * value is updated.
     */
    const { isStatic } = useContext(MotionConfigContext)
    if (isStatic) {
        const [, setLatest] = useState(initial)
        useEffect(() => value.onChange(setLatest), [])
    }
 
    return value
}