# Data & Overrides
A way to share data between components within Framer, using code overrides.The Data objects behaves like a simple JavaScript object in which you can store anything.
It updates the user interface of your project on every change, and can be used to share data between components and Frames. In this example, we’re simply changing the text
property of any text layer the override gets applied to. Learn more about Overrides.
import { Override, Data } from "framer"
const data = Data({ name: "Ben" })
export function setName(): Override {
return {
text: data.name,
}
}
# Incrementing Values
You can also use the Data
object to increment numeric values.
Here, we’re storing the rotate
value as 0
by default.
Then, we’re setting animate
to always set rotate
to said value.
Finally, the data.rotate
value gets incremented by 90
on every tap.
import { Data, Override } from "framer"
const data = Data({ rotate: 0 })
export function Rotate(): Override {
return {
animate: { rotate: data.rotate },
onTap() {
data.rotate = data.rotate + 90
},
}
}
# Data(initial): T
Allows data to be shared between Frames using Code Overrides. Any changes to the Data
instance will cause the preview to update and code overrides will re-render. In this example, we’re updating the scale
property on press
, setting it to 0.5
.
import { Data, Override } from "framer"
const data = Data({
scale: 0.5,
})
export function WhileTap(): Override {
return {
whileTap: {
scale: data.scale,
},
}
}
initial: Partial<T> | object The initial value of the data to be set. |
---|
returns: T the data object for use across components. |