React-lua A better way of handling Instances

[apictrain0]

You can write your topic however you want, but you need to answer these questions:

Hello I was wondering if there was a react-lua way of handling Regular Roblox Instances.
Example:

local Instance=game.ReplicatedStorage.Thingamajig
function ShopUIThingy()
  return React.createElement("ViewportFrame",{
    },
    Instance--How To use normal Instances
  )
end

root:render(ShopUIThingy,{},{})

2. What is the issue? Include screenshots / videos if possible!
   I sort of made my own implementation but I want to keep it within the React-Lua

local Instance=game.ReplicatedStorage.Thingamajig
function ShopUIThingy()
  return React.createElement("ViewportFrame",{
      [React.Tag]="ShopUIThingy"
    },{}
  )
end

root:render(ShopUIThingy,{},{})
local UIThingy=CollectionService:GetInstanceAddedSignal("ShopUIThingy"):Wait();
Instance.Parent=UIThingy;

I tried searching Devforums, bing, google, their github and youtube. But none show anything about Regular Instances.

Note: while my implementation works I want to still use React-Lua components like [React.Event.Activated] to make the thing go spinny

[ChasingSpace (Chasing)]

You can’t really work with external Instances and React. You can use React.Ref to interact with the Instances behind React elements and clone an external child to it (e.g. previewing an item inside of a ViewportFrame) but you can’t fully manage the external Instance with React.

There are “portals” with ReactRoblox.createPortal but it doesn’t let you really manage things fully with React to the best of my knowledge.

Assuming you’re using React 17 and not the legacy Roact:

local function Preview(Props)
  local ViewportRef = React.useRef(nil)

  React.useEffect(function()
    if (not ViewportRef.current or not Props.Instance) then
      return
    end

    local ExternalInstance = Props.Instance:Clone()
    ExternalInstance.Parent = ViewportRef.current

    return function()
      ExternalInstance:Destroy()
    end
  end, { Props.Instance }) -- tells the 'effect' to update if the Instance changes

  return React.createElement("ViewportFrame", {
    ref = ViewportRef
  })
end

-- To use:
React.createElement(Preview, {
  Instance = game.ReplicatedStorage.Thing
})

[apictrain0]

@ChasingSpace

Assuming you’re using React 17 and not the legacy Roact:

I am

react = "jsdotlua/react@17.1.0"
react-roblox = "jsdotlua/react-roblox@17.1.0"

Also I found your response pretty helpful

function Preview(Props)
  local ViewportRef = React.useRef(nil);
  local camref = React.useRef(nil);
  local campos, setcampos = React.useState(CFrame.new());
  React.useEffect(function()
    if (not ViewportRef.current or not Props.Instance) then
      return
    end
    local Clone = Props.Instance:Clone();
    Clone.Parent = ViewportRef.current;
    setcampos(CFrame.new(Clone:GetAttribute("CamPosition"),Clone:GetAttribute("Center")));
    return function()
      Clone:Destroy();
    end
  end,{Props.Instance})
  return React.createElement("ViewportFrame",{
    Size=UDim2.new(0,100,0,100),
    ref=ViewportRef,
    CurrentCamera=camref
  },{
    React.createElement("Camera",{
      CFrame=campos;
      ref=camref
    })
  })
end

Made some few tweaks and it works perfectly.
I probably should’ve stated earlier that None of the Events were going to be handled by the Roblox