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.

Luau

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

return story

Roblox-TS

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

export = story;

Using Controls

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

Luau

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
}

return story

Roblox-TS

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
   }
}

export = story;

Examples

React

Luau

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 
}

return story

Roblox-TS

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
   },
}

export = story;

Roact

Luau

local Roact = require(...)

local controls = { ... }

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

return story

Roblox-TS

import Roact from "@rbxts/roact"

const controls = { ... }

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

export = story;

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):ReactStory

UILabs.CreateRoactStory(info, story):RoactStory

Examples

React

Luau

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)

return story

Roblox-TS

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
})

export = story;

Roact

Luau

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)

return story

Roblox-TS

import Roact from "@rbxts/roact"

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

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

export = story;