The App.tsx file for the RGB LED example.

App.tsx

import { Override, Data } from "framer"
import { connectToHost } from "./Client"

// Socket

const serverUrl = "http://localhost:8080"

const responses = {
    CONNECT: () => console.log("Connected"),
    DISCONNECT: () => console.log("Disconnected"),
}

const dispatch = connectToHost(serverUrl, responses)

// Overrides

export function RedSlider(): Override {
    return {
        onValueChange: value => {
            dispatch("CHANGE_COLOR", {
                color: "red",
                value: value,
            })
        },
    }
}

export function GreenSlider(): Override {
    return {
        onValueChange: value => {
            dispatch("CHANGE_COLOR", {
                color: "green",
                value: value,
            })
        },
    }
}

export function BlueSlider(): Override {
    return {
        onValueChange: value => {
            dispatch("CHANGE_COLOR", {
                color: "blue",
                value: value,
            })
        },
    }
}