Add motionValue prop

src/hooks/use-motion-value.ts

@@ -20,15 +20,15 @@ import { motionValue } from "../motion-value"
  * const x = useMotionValue(0)
  * ```
  *
- * This can be passed to a motion component via props:
+ * This can be passed to a motion component via the `motionValue` prop:
  *
  * ```javascript
  * const MotionComponent = motion.div()
  *
  * export const () => {
  *   const x = useMotionValue(0)
  *
- *   return <MotionComponent x={x} />
+ *   return <MotionComponent motionValues={{ x }} />
  * }
  * ```
  *

src/hooks/use-posed-values.ts

@@ -4,28 +4,29 @@ import { PoseConfig, MotionProps, MotionValueMap } from "../motion/types"
 import { useRef, useEffect, RefObject } from "react"
 import { createValuesFromPose, bindValuesToRef } from "../utils/create-value"
 
+const isMotionValue = (value: any): value is MotionValue => value instanceof MotionValue
+
 export const usePosedValues = (
     config: PoseConfig,
-    { onPoseComplete, pose = "default", ...props }: MotionProps,
+    { onPoseComplete, pose = "default", motionValues, ...props }: MotionProps,
     ref: RefObject<Element>
 ): [MotionValueMap, Partial<MotionProps>] => {
-    const values: MotionValueMap = useRef(new Map()).current
-    const returnedProps = {}
+    const values: MotionValueMap = useRef(new Map<string, MotionValue>()).current
 
     // In this function we want to find the right approach to ensure
     // we successfully remove MotionValues from the returned props
     // in a performant way over subsequent renders.
 
     // 1. Add provided motion values via props to value map
-    Object.keys(props).forEach(key => {
-        const prop = props[key]
-
-        if (prop instanceof MotionValue) {
-            values.set(key, prop)
-        } else if (key !== "pose") {
-            returnedProps[key] = prop
-        }
-    })
+    if (motionValues) {
+        Object.keys(motionValues).forEach(key => {
+            const motionValue = motionValues[key]
+
+            if (isMotionValue(motionValue)) {
+                values.set(key, motionValue)
+            }
+        })
+    }
 
     // 2. Create values from poses
     const initialPoses = resolvePoses(pose)
@@ -45,5 +46,5 @@ export const usePosedValues = (
         return () => values.forEach(value => value.destroy())
     }, [])
 
-    return [values, returnedProps]
+    return [values, props]
 }

src/motion/__tests__/component.test.tsx

@@ -110,7 +110,7 @@ test("motion component accepts motion value", () => {
 
     const Component = () => {
         const x = useMotionValue(800)
-        return <Box x={x} />
+        return <Box motionValues={{ x }} />
     }
 
     const { container } = render(<Component />)
@@ -234,7 +234,7 @@ test("useTransform", async () => {
         const x = useMotionValue(75)
         const y = useTransform(x, [0, 100], [200, 100])
 
-        return <Box x={x} y={y} />
+        return <Box motionValues={{ x, y }} />
     }
 
     const { container } = render(<Component />)

src/motion/types.ts

@@ -23,6 +23,7 @@ export type MotionProps<Poses = string> = {
     [key: string]: any
     ref?: Ref<any>
     pose?: Poses | Poses[] | MotionValue
+    motionValues?: { [key: string]: MotionValue }
     style?: CSSProperties
     onPoseComplete?: (current: CurrentValues, velocity: VelocityValues) => void
 }