Iris

Providing your library

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

Key	Type	Description
iris   Required	Iris	Iris library to be used

Rendering your story

UI Labs will setup Iris to work in Stories and will create a UserInputService mock for you. The setup UI Labs will follow is based on This Example

After this, the story function will be called once, here, you will connect Iris.

Luau

local story = {
   iris = Iris,
   story = function(props)

      Iris:Connect(function()
         Iris.ShowDemoWindow()
      end)
   end,
}

Roblox-TS

const story = {
   iris: Iris,
   story: (props: InferIrisProps<typeof controls>) => {

      Iris.Connect(() => {
         Iris.ShowDemoWindow()
      })
   },
}

Using controls

UI Labs will create Iris.State's for every control and it will update them when the control changes. These controls will be available in the props table.

Luau

local controls = {
   Title = "Window",
   IsUncollapsed = false,
}

local story = {
   iris = Iris,
   controls = controls,
   story = function(props)
      local controls = props.controls

      Iris:Connect(function()
         Iris.Window({ controls.Title:get() }, { isUncollapsed = controls.IsUncollapsed })
            --- 
         Iris.End()
      end)
   end
}

Roblox-TS

const controls = {
   Title: "Window",
   IsUncollapsed: false,
}

const story = {
   iris: Iris,
   controls: controls,
   story: (props: InferIrisProps<typeof controls>) => {
      const controls = props.controls

      Iris.Connect(() => {
         Iris.Window([ controls.Title.get() ], { isUncollapsed: controls.IsUncollapsed })
            ///
         Iris.End()
      })
   }
}

Cleaning up

UI Labs will automatically Shutdown Iris when the story is unmounted and destroy the UserInputService mock.

Additionally, if you need to cleanup, you can return a function that will be called when the story is unmounted.

Example

Luau

local story = {
   iris = Iris,
   controls = controls,
   story = function(props)
      
      Iris:Connect(function()
         Iris.ShowDemoWindow()
      end)

      return function()
         print("Story is getting unmounted")
      end
   end
}

Roblox-TS

const story = {
   iris: Iris,
   controls: controls,
   story: (props: InferIrisProps<typeof controls>) => {

      Iris.Connect(() => {
         Iris.ShowDemoWindow()
      })

      return () => {
         print("Story is getting unmounted")
      }
   }
}

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.CreateIrisStory(info, story):IrisStory

Example

Luau

local Iris = require(...)

local UILabs = require(...)
local CreateIrisStory = UILabs.CreateIrisStory

local controls = { ... }

local story = CreateIrisStory({ 
   iris = Iris,
   controls = controls,
}, function(props)

   Iris:Connect(function()
      Iris.ShowDemoWindow()
   end)
end)

Roblox-TS

import Iris from "@rbxts/iris"
import { CreateIrisStory } from "@rbxts/ui-labs"

const controls = { ... }

const story = CreateIrisStory({
   fusion: Fusion,
   controls: controls,
}, (props: InferIrisProps<typeof controls>) => {

   Iris.Connect(() => {
      Iris.ShowDemoWindow()
   })
})