using-refs

Clarify React ref and PuerTS $ref/$unref usage for UE object access and out parameters.

1|Updated Dec 23, 2025
One-click install
npx skills add https://github.com/15195999826/LomoMarketplace --skill using-refs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: using-refs
Source: https://github.com/15195999826/LomoMarketplace/tree/main/plugins/UE_ReactUMG/skills/using-refs/SKILL.md
Command: npx skills add https://github.com/15195999826/LomoMarketplace --skill using-refs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

ReactUMG uses two separate ref concepts: React ref for component references, and Puerts $ref/$unref for handling UE C++ out parameters. Mixing them can lead to incorrect access or failed API calls.

Core Features & Use Cases

  • Clear distinction between React refs and Puerts $ref/$unref with practical guidance.
  • Out parameter handling with $ref/$unref for UE API calls.
  • Practical guidance for common patterns in UE5 UMG integrations.

Quick Start

Attach a React ref to a CanvasPanel and use its nativePtr, or use $ref/$unref to extract C++ values as needed.

Frequently Asked Questions about using-refs

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What's the difference between React ref and PuerTS $ref in ReactUMG?▼

React ref accesses UE component instances via nativePtr for widget interaction, while PuerTS $ref/$unref handles C++ out parameters required by UE APIs like GetDataTableRowNames and CaptureMouse. Use React ref for component references; use $ref/$unref to supply and extract values from API calls.

How do I attach a React ref to a UE widget and access its native pointer?▼

Attach a React ref callback to a CanvasPanel or other widget component, then access the underlying UE object through ref.nativePtr. Enforce constructor binding to maintain correct callback lifecycle and ensure the reference persists across re-renders.

When should I use $ref/$unref instead of React ref in Unreal Engine integrations?▼

Use $ref/$unref when calling UE APIs that require out parameters—containers that extract values from C++ function calls. React ref alone cannot handle these output parameters; $ref wraps the container, $unref retrieves the result after the API call completes.

Can I use React ref to handle UE API calls that need out parameters?▼

No. React ref retrieves component instances; it cannot supply or extract values from C++ out parameters. You must use PuerTS $ref/$unref containers for out parameter handling in UE API calls like data retrieval and input capture.

What are common patterns for using refs in ReactUMG with UE5?▼

Common patterns include attaching React ref to widgets for CaptureMouse calls, using $ref/$unref with GetDataTableRowNames to extract row data, and managing ref lifecycle through constructor binding to prevent stale references during widget interaction.