Example of using overrides to pass data across components and managing it in a flow

SimpleTextOverride.tsx

import { Data, Override } from "framer"

const data = Data({
    text: "",
    email: "",
})

//overrides can be shared across the components that share the property that is being overriden
export const TextInput: Override = props => {
    return {
        // the override needs to be a property defined in the component
        onValueChange: (text: string) => {
            data.text = text
            if (data.text.length > 18) {
                data.email = data.text.substring(0, 18) + "..."
            } else {
                data.email = data.text
            }
        },
        value: data.text,
    }
}

export const TextOutput: Override = props => {
    console.log("Testing output: ", data.text)
    return {
        email_label: data.email,
        //text on the left is the binding variable name for the design component attribute
    }
}