useMotionValueEvent
useMotionValueEvent
manages a motion value event handler throughout the lifecycle of a React component.
function Component() {
const x = useMotionValue(0)
useMotionValueEvent(x, "animationStart", () => {
console.log("animation started on x")
})
useMotionValueEvent(x, "change", (latest) => {
console.log("x changed to", latest)
})
return <motion.div style={{ x }} />
}
When the component is unmounted, event handlers will be safely cleaned up.
Usage
Import from Motion:
import { useMotionValueEvent } from "motion/react"
To add an event listener to a motion value, provide the value, event name and callback:
const color = useMotionValue("#00f")
useMotionValueEvent(color, "change", (latest) => {
console.log(latest)
})
Available events are:
change
animationStart
animationComplete
animationCancel
"change"
events are provided the latest value of the motion value.
Advanced
useMotionValueEvent
is a helper function for a motion value's on
method. With on
, you can start listening to events whenever you like, for instance within an event handler. But remember to also unsubscribe when the component unmounts.
useEffect(() => {
const doSomething = () => {}
const unsubX = x.on("change", doSomething)
const unsubY = y.on("change", doSomething)
return () => {
unsubX()
unsubY()
}
}, [x, y])
useMotionValueEvent
manages a motion value event handler throughout the lifecycle of a React component.
function Component() {
const x = useMotionValue(0)
useMotionValueEvent(x, "animationStart", () => {
console.log("animation started on x")
})
useMotionValueEvent(x, "change", (latest) => {
console.log("x changed to", latest)
})
return <motion.div style={{ x }} />
}
When the component is unmounted, event handlers will be safely cleaned up.
Usage
Import from Motion:
import { useMotionValueEvent } from "motion/react"
To add an event listener to a motion value, provide the value, event name and callback:
const color = useMotionValue("#00f")
useMotionValueEvent(color, "change", (latest) => {
console.log(latest)
})
Available events are:
change
animationStart
animationComplete
animationCancel
"change"
events are provided the latest value of the motion value.
Advanced
useMotionValueEvent
is a helper function for a motion value's on
method. With on
, you can start listening to events whenever you like, for instance within an event handler. But remember to also unsubscribe when the component unmounts.
useEffect(() => {
const doSomething = () => {}
const unsubX = x.on("change", doSomething)
const unsubY = y.on("change", doSomething)
return () => {
unsubX()
unsubY()
}
}, [x, y])
useMotionValueEvent
manages a motion value event handler throughout the lifecycle of a React component.
function Component() {
const x = useMotionValue(0)
useMotionValueEvent(x, "animationStart", () => {
console.log("animation started on x")
})
useMotionValueEvent(x, "change", (latest) => {
console.log("x changed to", latest)
})
return <motion.div style={{ x }} />
}
When the component is unmounted, event handlers will be safely cleaned up.
Usage
Import from Motion:
import { useMotionValueEvent } from "motion/react"
To add an event listener to a motion value, provide the value, event name and callback:
const color = useMotionValue("#00f")
useMotionValueEvent(color, "change", (latest) => {
console.log(latest)
})
Available events are:
change
animationStart
animationComplete
animationCancel
"change"
events are provided the latest value of the motion value.
Advanced
useMotionValueEvent
is a helper function for a motion value's on
method. With on
, you can start listening to events whenever you like, for instance within an event handler. But remember to also unsubscribe when the component unmounts.
useEffect(() => {
const doSomething = () => {}
const unsubX = x.on("change", doSomething)
const unsubY = y.on("change", doSomething)
return () => {
unsubX()
unsubY()
}
}, [x, y])