UI Labs

Appearance

Function Stories ​

Function stories are the basic stories, they are functions that UI Labs will run when the story is mounted.

These functions are used in Hoarcekat

Mounting the story ​

These functions will receive a target as a parameter, which is the Frame where the story should be rendered.

lua
function story(target: Frame)
   -- Render your story here inside "target"
end

return story
function story(target: Frame)
   -- Render your story here inside "target"
end

return story
ts
function story(target: Frame) {
   // Render your story here inside "target"
}

export = story;
function story(target: Frame) {
   // Render your story here inside "target"
}

export = story;

Cleaning up ​

After the function is executed, it should return a cleanup function that will be called when the story is unmounted.

lua
function story(target: Frame)
   -- Render your story here inside "target"

   return function()
      -- Clean up your story here
   end
end
function story(target: Frame)
   -- Render your story here inside "target"

   return function()
      -- Clean up your story here
   end
end
ts
function story(target: Frame) {
   // Render your story here inside "target"

   return () => {
	   // Clean up your story here
   };
}

export = story;
function story(target: Frame) {
   // Render your story here inside "target"

   return () => {
	   // Clean up your story here
   };
}

export = story;

Story Erroring

The cleanup function cant be executed if the mounting function errors. If the story did mount, a Studio restart may be needed to avoid memory leaks and non-destroyed Instances

UI Labs will warn you about this

lua
local function story(target)
   local newElement = Roact.createElement("TextLabel", {})
   local handle = Roact.mount(newElement, target) --Roact mounted

   error("error") --Will prevent the cleanup function from being returned
   return function()
      --Never unmounts
      Roact.unmount(handle)
   end
end
local function story(target)
   local newElement = Roact.createElement("TextLabel", {})
   local handle = Roact.mount(newElement, target) --Roact mounted

   error("error") --Will prevent the cleanup function from being returned
   return function()
      --Never unmounts
      Roact.unmount(handle)
   end
end

Examples ​

React / Roact
lua
local function story(target)
   local component = Roact.createElement("Frame", {})
   Roact.mount(component, target)

   return function()
      Roact.unmount(component)
   end
end

return story
local function story(target)
   local component = Roact.createElement("Frame", {})
   Roact.mount(component, target)

   return function()
      Roact.unmount(component)
   end
end

return story
tsx
function story(target: Frame) {
   const component = <frame />
   Roact.mount(component, target)

   return () => {
      Roact.unmount(component)
   };
}

export = story;
function story(target: Frame) {
   const component = <frame />
   Roact.mount(component, target)

   return () => {
      Roact.unmount(component)
   };
}

export = story;
Fusion
lua
local function story(target: Frame)
   local component = Fusion.New "Frame" {
      Parent = target,
   }

   return function()
      component:Destroy()
   end
end

return story
local function story(target: Frame)
   local component = Fusion.New "Frame" {
      Parent = target,
   }

   return function()
      component:Destroy()
   end
end

return story
ts
function story(target: Frame) {
   const component = Fusion.New("Frame")({
      Parent: target,
   }); 
	
   return () => {
      component:Destroy()
   }
}

export = story;
function story(target: Frame) {
   const component = Fusion.New("Frame")({
      Parent: target,
   }); 
	
   return () => {
      component:Destroy()
   }
}

export = story;
Roblox Instances
lua
local function story(target: Frame)
   local component = Instance.new("Frame")
   component.Parent = target

   return function()
      component:Destroy()
   end
end

return story
local function story(target: Frame)
   local component = Instance.new("Frame")
   component.Parent = target

   return function()
      component:Destroy()
   end
end

return story
ts
function story(target: Frame) {
   const component = new Instance("Frame")
   component.Parent = target
	
   return () => {
      component.Destroy()
   };
}

export = story;
function story(target: Frame) {
   const component = new Instance("Frame")
   component.Parent = target
	
   return () => {
      component.Destroy()
   };
}

export = story;