From 84c83c1befe287d60aa82a2c0bf4c8e6030a4c4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Valverd=C3=A9?= <julien.valverde@mailo.com>
Date: Thu, 1 Jan 2026 20:18:09 +0100
Subject: [PATCH] Fix

---
 packages/example/src/TestUi1Component.tsx     | 45 ++++++++++++++++---
 .../react-godot-renderer/src/Component.ts     | 30 ++++++++++---
 packages/react-godot-renderer/src/Renderer.ts |  2 +-
 3 files changed, 64 insertions(+), 13 deletions(-)

diff --git a/packages/example/src/TestUi1Component.tsx b/packages/example/src/TestUi1Component.tsx
index 0ce2432..fc5dc3a 100644
--- a/packages/example/src/TestUi1Component.tsx
+++ b/packages/example/src/TestUi1Component.tsx
@@ -1,13 +1,37 @@
-import Godot from "godot"
+import Godot, { Vector2 } from "godot"
+import { useEffect } from "react"
 import { Component } from "react-godot-renderer"
 
 
-const Control = Component.make(Godot.Control)
+const HFlowContainer = Component.make(Godot.HFlowContainer)
 const Label = Component.make(Godot.Label)
+const TextEdit = Component.make(Godot.TextEdit)
+const Button = Component.make(Godot.Button)
 
 export function TestUi1Component() {
+    const textEditRef = TextEdit.useUnsafeRef()
+    const buttonRef = Button.useUnsafeRef()
+
+    useEffect(() => {
+        const onTextChanged = Godot.Callable.create(() => {
+            console.log(textEditRef.current.text)
+        })
+
+        textEditRef.current.text_changed.connect(onTextChanged)
+        return () => { textEditRef.current.text_changed.disconnect(onTextChanged) }
+    }, [textEditRef.current])
+
+    useEffect(() => {
+        const onPressed = Godot.Callable.create(() => {
+            console.log("Pressed!")
+        })
+
+        buttonRef.current.pressed.connect(onPressed)
+        return () => { buttonRef.current.pressed.disconnect(onPressed) }
+    }, [buttonRef.current])
+
     return (
-        <Control
+        <HFlowContainer
             name="Root"
             anchor_left={0}
             anchor_top={0}
@@ -19,7 +43,18 @@ export function TestUi1Component() {
                 text="This is a label"
             />
 
-            <Control name="Control" />
-        </Control>
+            <TextEdit
+                ref={textEditRef}
+                name="TextEdit"
+                text=""
+                custom_minimum_size={new Vector2(200, 35)}
+            />
+
+            <Button
+                ref={buttonRef}
+                name="Button"
+                text="Ok"
+            />
+        </HFlowContainer>
     )
 }
diff --git a/packages/react-godot-renderer/src/Component.ts b/packages/react-godot-renderer/src/Component.ts
index 6397c37..2dacedf 100644
--- a/packages/react-godot-renderer/src/Component.ts
+++ b/packages/react-godot-renderer/src/Component.ts
@@ -2,21 +2,37 @@ import type * as Godot from "godot"
 import * as React from "react"
 
 
-export type Component<T extends Godot.Node<Godot.NodePathMap>> = React.FunctionComponent<Props<T>>
+export interface Component<T extends Godot.Node<Godot.NodePathMap>>
+extends React.FunctionComponent<Props<T>>, Prototype<T> {}
+
 export type Props<T extends Godot.Node<Godot.NodePathMap>> = {
+    readonly ref?: React.RefObject<T | null>
+} & {
     // biome-ignore lint/complexity/noBannedTypes: using Function here is completely fine
     [K in keyof T as T[K] extends Function ? never : K]?: T[K]
 }
 
-export interface InstrinsicAttributes {
+export interface Prototype<T extends Godot.Node<Godot.NodePathMap>> {
+    useRef(): React.RefObject<T | null>
+    useUnsafeRef(): React.RefObject<T>
+}
+
+export interface InstrinsicAttributes extends React.Attributes {
     readonly children?: React.ReactNode
     readonly name?: string
 }
 
+export const Prototype: Prototype<any> = {
+    useRef() { return React.useRef(null) },
+    useUnsafeRef() { return React.useRef(null) },
+}
+
 export const make = <T extends Godot.Node<Godot.NodePathMap>>(
     class_: new (...args: any[]) => T
-): Component<T> => {
-    const f = (props: Props<T>) => React.createElement("element", { ...props, class: class_ })
-    f.displayName = class_.name
-    return f
-}
+): Component<T> => Object.setPrototypeOf(
+    Object.assign(
+        (props: Props<T>) => React.createElement("element", { ...props, class: class_ }),
+        { displayName: class_.name },
+    ),
+    Prototype,
+)
diff --git a/packages/react-godot-renderer/src/Renderer.ts b/packages/react-godot-renderer/src/Renderer.ts
index aa7bf0c..76248f4 100644
--- a/packages/react-godot-renderer/src/Renderer.ts
+++ b/packages/react-godot-renderer/src/Renderer.ts
@@ -19,7 +19,7 @@ export const renderComponent: {
 } = (
     container: Node<NodePathMap>,
     component: React.FC<{}>,
-    props?: React.Attributes,
+    props?: Record<string, unknown>,
 ): void => {
     const reconciler = Reconciler.make()