React-lua design help (where to mount)

Help and Feedback Scripting Support
#1

Hey,

I have been getting into react-lua for a little bit and I am slowly getting the hang of it. I’m working with hoarcekat and that works like a charm!

I’m just wondering, how and where in your hierarchy do you actually create and mount the ScreenGUI for it to work in game.

So say I have been working on an Inventory. So I have an Inventory.lua which contains the react element and I have Inventory.story.lua to render it in hoarcekat.

ReplicatedStorage
|-UI
|–Inventory.lua
|–Inventory.story.lua

Now I want the Inventory to show up in the game when a player presses tab. I am currently doing this in a separate InventoryController.lua and unmounting when the inventory doesn’t need to be rendered.

local Players = game:GetService("Players")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local ReactRoblox = require(ReplicatedStorage.Packages.ReactRoblox)
local React = require(ReplicatedStorage.Packages.React)

local Inventory = require(ReplicatedStorage.UI.Inventory)

local InventoryController = {}

local e = React.createElement

local InventoryGui = Instance.new("ScreenGui")
InventoryGui.Name = "Inventory"
InventoryGui.Parent = Players.LocalPlayer.PlayerGui

local root = ReactRoblox.createRoot(InventoryGui)

function InventoryController:OpenInventory()
	root:render(e(Inventory))
end

function InventoryController:CloseInventory()
	root:unmount()
end

return InventoryController

This feels a bit hacky though… Is there a better way to do this? As this step needs to be done for every ScreenGui in the game.

I realise the answer to this question is probably a stylistic choice, but I’m at a start of a bigger project and am wondering what is a clean way to set this up.

Thank you! :slight_smile:

TL;DR: where in your project do you setup your screenGui’s and mount react components to it?