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 | 32x 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 } |