diff --git a/src/hooks/use-motion-value.ts b/src/hooks/use-motion-value.ts
index f8865d5aa5..4bede2a6a1 100644
--- a/src/hooks/use-motion-value.ts
+++ b/src/hooks/use-motion-value.ts
@@ -20,7 +20,7 @@ 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()
@@ -28,7 +28,7 @@ import { motionValue } from "../motion-value"
* export const () => {
* const x = useMotionValue(0)
*
- * return
+ * return
* }
* ```
*
diff --git a/src/hooks/use-posed-values.ts b/src/hooks/use-posed-values.ts
index b16fca95f1..a3ad2955ef 100644
--- a/src/hooks/use-posed-values.ts
+++ b/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
): [MotionValueMap, Partial] => {
- const values: MotionValueMap = useRef(new Map()).current
- const returnedProps = {}
+ const values: MotionValueMap = useRef(new Map()).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]
}
diff --git a/src/motion/__tests__/component.test.tsx b/src/motion/__tests__/component.test.tsx
index 6af1a350b8..40b39cef84 100644
--- a/src/motion/__tests__/component.test.tsx
+++ b/src/motion/__tests__/component.test.tsx
@@ -110,7 +110,7 @@ test("motion component accepts motion value", () => {
const Component = () => {
const x = useMotionValue(800)
- return
+ return
}
const { container } = render()
@@ -234,7 +234,7 @@ test("useTransform", async () => {
const x = useMotionValue(75)
const y = useTransform(x, [0, 100], [200, 100])
- return
+ return
}
const { container } = render()
diff --git a/src/motion/types.ts b/src/motion/types.ts
index 493dbc3941..826bde5c6f 100644
--- a/src/motion/types.ts
+++ b/src/motion/types.ts
@@ -23,6 +23,7 @@ export type MotionProps = {
[key: string]: any
ref?: Ref
pose?: Poses | Poses[] | MotionValue
+ motionValues?: { [key: string]: MotionValue }
style?: CSSProperties
onPoseComplete?: (current: CurrentValues, velocity: VelocityValues) => void
}