React / Roact

Cómo Proporcionar la biblioteca

Para proporcionar tu biblioteca, necesitarás agregar las siguientes entradas a la tabla de tu historia:

Al Usar React

Indice	Tipo	Descripción
react   Obligatorio	ReactRoblox	La biblioteca de React que será utilizada
reactRoblox   Obligatorio	ReactRoblox	La biblioteca de ReactRoblox que será utilizada
renderer   Opcional	"deferred" | "legacy"	El tipo de renderizador que se utilizará. deferred: ReactRoblox.createRoot()` será utilizado  (por defecto) legacy: ReactRoblox.createLegacyRoot()` será utilizado

Al Usar Roact

Clave	Tipo	Descripción
roact   Obligatorio	Roact	La biblioteca de Roact que será utilizada

Cómo Renderizar Historias

Las historias de React y Roact serán renderizadas al ejectuar la función story cada vez que los Controles de la historia cambien. Esta función recibirá una tabla de propiedades (props) que contiene los valores de los controles.

La función regresaria un React.Element que será renderizado.

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;

Cómo Usar Controles

UI Labs proporcionará a la historia los valores de los controles en el indice controls de la tabla props.

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;

Ejemplos

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;

Cómo Usar el Creador de Historias

Puedes usar el Creador de Historias del Paquete de Utilidades para crear tu historia. Estos inferirán los tipos de controles para Roblox-TS.

UILabs.CreateReactStory(info, story):ReactStory

UILabs.CreateRoactStory(info, story):RoactStory

Ejemplos

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;