React / Roact

Providing your library

To provide your library you will need to add the following keys to your story table:

Using React

Key	Type	Description
react Required	`ReactRoblox`	React library to be used
reactRoblox Required	`ReactRoblox`	ReactRoblox library to be used
renderer Optional	`"deferred" \| "legacy"`	The type of renderer that will be used. deferred: ReactRoblox.createRoot()` will be used (default) legacy: ReactRoblox.createLegacyRoot()` will be used

Using Roact

Key	Type	Description
roact Required	`Roact`	Roact library to be used

Rendering your story

React and Roact stories will be rendered by calling the story function everytime the story Controls change. This function will receive a props table that will contain the Controls values.

The function will return a React.Element to be rendered.

LuauRoblox-TS

lua

local story = {
   react = React,
   reactRoblox = ReactRoblox,
   controls = controls,
   story = function(props)
      local component = React.createElement("Frame", {})
      return component
   end
}

local story = {
   react = React,
   reactRoblox = ReactRoblox,
   controls = controls,
   story = function(props)
      local component = React.createElement("Frame", {})
      return component
   end
}

tsx

const story = {
   react: React,
   reactRoblox: ReactRoblox,
   controls: controls,
   story: (props: InferProps<typeof controls>) => {
      const component = <frame />
      return component
   }, 
}

const story = {
   react: React,
   reactRoblox: ReactRoblox,
   controls: controls,
   story: (props: InferProps<typeof controls>) => {
      const component = <frame />
      return component
   }, 
}

Using Controls

UI Labs will pass the control values in the controls key of the props table to your story.

LuauRoblox-TS

lua

local controls = {
   Visible = true,
}

local story = {
   react = react,
   reactRoblox = reactRoblox,
   controls = controls,
   story = function(props)
      local component = React.createElement("Frame", {
         Visible = props.controls.Visible
      })

      return component
   end
}

local controls = {
   Visible = true,
}

local story = {
   react = react,
   reactRoblox = reactRoblox,
   controls = controls,
   story = function(props)
      local component = React.createElement("Frame", {
         Visible = props.controls.Visible
      })

      return component
   end
}

tsx

const controls = {
   Visible: true,
}

const story = {
   react: React,
   reactRoblox: ReactRoblox,
   controls: controls,
   story: (props: InferFusionProps<typeof controls>) => {
      const component = <frame Visible={props.controls.Visible} />

      return component
   }
}

const controls = {
   Visible: true,
}

const story = {
   react: React,
   reactRoblox: ReactRoblox,
   controls: controls,
   story: (props: InferFusionProps<typeof controls>) => {
      const component = <frame Visible={props.controls.Visible} />

      return component
   }
}

Examples

React

LuauRoblox-TS

lua

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

local controls = { ... }

local story = {
   react = React,
   reactRoblox = ReactRoblox,
   controls = controls,
   story = function(props)
      local component = React.createElement("Frame", {})
      return component
   end 
}

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

local controls = { ... }

local story = {
   react = React,
   reactRoblox = ReactRoblox,
   controls = controls,
   story = function(props)
      local component = React.createElement("Frame", {})
      return component
   end 
}

tsx

import React from "@rbxts/react"
import ReactRoblox from "@rbxts/react-roblox"

const controls = { ... }

const story = {
   react: React, 
   reactRoblox: ReactRoblox,
   controls: controls,
   story: (props: InferProps<typeof controls>) => {
      const component = <frame />
      return component
   },
}

import React from "@rbxts/react"
import ReactRoblox from "@rbxts/react-roblox"

const controls = { ... }

const story = {
   react: React, 
   reactRoblox: ReactRoblox,
   controls: controls,
   story: (props: InferProps<typeof controls>) => {
      const component = <frame />
      return component
   },
}

Roact

LuauRoblox-TS

lua

local Roact = require(...)

local controls = { ... }

local story = {
   roact = Roact,
   controls = controls,
   story = function(props)
      local component = Roact.createElement("Frame", {})
      return component
   end 
}

local Roact = require(...)

local controls = { ... }

local story = {
   roact = Roact,
   controls = controls,
   story = function(props)
      local component = Roact.createElement("Frame", {})
      return component
   end 
}

tsx

import Roact from "@rbxts/roact"

const controls = { ... }

const story = {
   roact: Roact, 
   controls: controls,
   story: (props: InferProps<typeof controls>) => {
      const component = <frame />
      return component
   },
}

import Roact from "@rbxts/roact"

const controls = { ... }

const story = {
   roact: Roact, 
   controls: controls,
   story: (props: InferProps<typeof controls>) => {
      const component = <frame />
      return component
   },
}

Using the Story Creator

You can use the Story Creator in the Utility Package to create your story. These will infer the control types for Roblox-TS.

UILabs.CreateReactStory(info, story):StoryTable

UILabs.CreateRoactStory(info, story):StoryTable

Examples

React

LuauRoblox-TS

lua

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

local UILabs = require(...)
local CreateReactStory = UILabs.CreateReactStory

local story = CreateReactStory({ 
   react = React,
   reactRoblox = ReactRoblox,
   controls = {},
}, function(props)
   local component = React.createElement("Frame", {})
   return component
end)

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

local UILabs = require(...)
local CreateReactStory = UILabs.CreateReactStory

local story = CreateReactStory({ 
   react = React,
   reactRoblox = ReactRoblox,
   controls = {},
}, function(props)
   local component = React.createElement("Frame", {})
   return component
end)

tsx

import React from "@rbxts/react"
import ReactRoblox from "@rbxts/react-roblox"

import { CreateReactStory } from "@rbxts/ui-labs"

const story = CreateReactStory({
   react: React,
   reactRoblox: ReactRoblox,
   controls: {},
}, (props) => {
   const component = <frame />
   return component
})

import React from "@rbxts/react"
import ReactRoblox from "@rbxts/react-roblox"

import { CreateReactStory } from "@rbxts/ui-labs"

const story = CreateReactStory({
   react: React,
   reactRoblox: ReactRoblox,
   controls: {},
}, (props) => {
   const component = <frame />
   return component
})

Roact

LuauRoblox-TS

lua

local Roact = require(...)

local UILabs = require(...)
local CreateRoactStory = UILabs.CreateRoactStory

local story = CreateRoactStory({ 
   roact = Roact,
   controls = {},
}, function(props)
   local component = Roact.createElement("Frame", {})
   return component
end)

local Roact = require(...)

local UILabs = require(...)
local CreateRoactStory = UILabs.CreateRoactStory

local story = CreateRoactStory({ 
   roact = Roact,
   controls = {},
}, function(props)
   local component = Roact.createElement("Frame", {})
   return component
end)

tsx

import Roact from "@rbxts/roact"

import { CreateRoactStory } from "@rbxts/ui-labs"

const story = CreateRoactStory({
   roact: roact,
   controls: {},
}, (props) => {
   const component = <frame />
   return component
})

import Roact from "@rbxts/roact"

import { CreateRoactStory } from "@rbxts/ui-labs"

const story = CreateRoactStory({
   roact: roact,
   controls: {},
}, (props) => {
   const component = <frame />
   return component
})

React / Roact ​

Providing your library ​

Using React ​

Using Roact ​

Rendering your story ​

Using Controls ​

Examples ​

Using the Story Creator ​

Examples ​

React / Roact

Providing your library

Using React

Using Roact

Rendering your story

Using Controls

Examples

Using the Story Creator

Examples