Skip to main content

Roact

flipbook supports Roblox's legacy Roact library. Pass in your installation of Roact to your Storybook and all stories will be rendered with it.

info

Roact is an archived repository that we consider to be legacy software. We recommend the use of React for new work. flipbook aims to support Roact for the forseeable future, but reserves the option to remove support in future major versions.

Storybook​

Project/Roact.storybook.luau
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local Roact = require(ReplicatedStorage.Packages.Roact)

return {
	name = "Roact",
	storyRoots = {
		script.Parent,
	},
	packages = {
		Roact = Roact,
	},
}

Component​

Project/Components/Button.luau
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local Roact = require(ReplicatedStorage.Packages.Roact)

local RoactButton = Roact.Component:extend("RoactButton")

function RoactButton:render()
	return Roact.createElement("TextButton", {
		Text = self.props.text,
		TextSize = 16,
		Font = Enum.Font.BuilderSansExtraBold,
		TextColor3 = Color3.fromRGB(50, 50, 50),
		BackgroundColor3 = Color3.fromRGB(255, 255, 255),
		BorderSizePixel = 0,
		Size = UDim2.fromOffset(200, 40),
		[Roact.Event.Activated] = self.props.onActivated,
	})
end

return RoactButton

Story​

Project/Components/Button.story.luau
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local Roact = require(ReplicatedStorage.Packages.Roact)

local RoactButton = require(script.Parent.RoactButton)

return {
	story = function()
		return Roact.createElement(RoactButton, {
			text = "Click Me",
			onActivated = function()
				print("click")
			end,
		})
	end,
}