Providing Roact components with custom instances

Help and Feedback Scripting Support
#1

Hello, I have began to explore Roact for developing my game’s UI. One challenge I have run into is providing Roact components with instances from custom classes. To illustrate:

local Roact = require(game.ReplicatedStorage.Roact)
local ButtonGui = Roact.Component:extend("ButtonGui")

--can't add any info from here
function ButtonGui:init()
	self:setState({
		Time = 0;
	})
end

--can't add any info from here
function ButtonGui:render()
	return Roact.createElement("ScreenGui", {}, {
		Button = Roact.createElement("TextButton", {
			Size = UDim2.new(0,50,0,50);
			Text = tostring(self.state.Time);
		}, {})
	})
end

-- setState will error if this method is called
function ButtonGui:add(tab) 
	self:setState({
		Thing = tab
	})
end


return ButtonGui

Roact components seem to be closed to new information from an external source. If I had, say, a Timer class with a .Time property, and I wanted the ButtonGui component to use an instance of that class that has already been created to determine its text, it seems as if that would not be possible.

Is it possible to add existing instances to Roact components? If so, how?

Thanks.

1 Like