React
Flipbook supports Roblox's transpilation of React 17 through the use of jsdotlua's React fork. Pass in your installation of React and ReactRoblox to your Storybook and all stories will be rendered with it.
Storybook
- Default
- Storyteller
Project/React.storybook.luau
local React = require("@pkg/React")
local ReactRoblox = require("@pkg/ReactRoblox")
return {
name = "React",
storyRoots = {
script.Parent,
},
packages = {
React = React,
ReactRoblox = ReactRoblox,
},
}
Project/React.storybook.luau
local React = require("@pkg/React")
local ReactRoblox = require("@pkg/ReactRoblox")
local Storyteller = require("@pkg/Storyteller")
local storybook: Storyteller.Storybook = {
name = "React (Storyteller)",
storyRoots = {
script.Parent,
},
packages = {
React = React,
ReactRoblox = ReactRoblox,
},
}
return storybook
Component
Project/Components/Button.luau
local React = require("@pkg/React")
local function ReactButton(props: {
text: string,
onActivated: () -> (),
})
return React.createElement("TextButton", {
Text = 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),
[React.Event.Activated] = props.onActivated,
})
end
return ReactButton
Story
- Default
- Storyteller
Project/Components/Button.story.luau
local React = require("@pkg/React")
local ReactButton = require("./ReactButton")
return {
story = function()
return React.createElement(ReactButton, {
text = "Click Me",
onActivated = function()
print("click")
end,
})
end,
}
Project/Components/Button.story.luau
local React = require("@pkg/React")
local Storyteller = require("@pkg/Storyteller")
local ReactButton = require("./ReactButton")
local story: Storyteller.Story<any> = {
story = function()
return React.createElement(ReactButton, {
text = "Click Me",
onActivated = function()
print("click")
end,
})
end,
}
return story