<div align="center"><img src="https://australis.dev/roact-tsx.png?v=3"/></div> <h1 align="center">@rbxts/roact</h1> <div align="center"> <a href="https://roblox.github.io/roact"> <img src="https://img.shields.io/badge/docs-lua-purple.svg" alt="Documentation"></img> </a> <a href="https://github.com/roblox-ts/roblox-ts"> <img src="https://img.shields.io/badge/github-roblox_typescript-red.svg" alt="roblox-ts"></img> </a> <a href="https://roblox-ts.github.io/docs/roact/"> <img src="https://img.shields.io/badge/docs-typescript-blue.svg" alt="Documentation"></img> </a> <a href="https://www.npmjs.com/package/@rbxts/roact"> <img src="https://badge.fury.io/js/%40rbxts%2Froact.svg"></img> </a> </div> <div align="center"> A typescript port of <a href='https://github.com/Roblox/roact'>Roact</a>, a declarative UI library inspired by <a href="https://reactjs.org">React</a>. </div> <div> </div>

Installation

You can install it via npm i @rbxts/roact.

Usage

For a detailed guide and examples, check out the official Roact documentation. The Wiki on this repository will have guides on how to adapt to using typescript instead of Lua.

Required tsconfig.json settings

You will need the settings from roblox-ts, as well as:

{
	"compilerOptions": {
		"jsx": "react",
		"jsxFactory": "Roact.jsx",
		"jsxFragmentFactory": "Roact.Fragment",
	},
}

Regular TypeScript

import Roact from '@rbxts/roact';

const LocalPlayer = game.GetService("Players").LocalPlayer as Player;
const PlayerGui = LocalPlayer.FindFirstChildOfClass("PlayerGui");

const tree = Roact.createElement("ScreenGui", {}, {
  Label: Roact.createElement("TextLabel", {
    Text: "Hello, World!",
    Size: new UDim2(1, 0, 1, 0)
  }),
});

Roact.mount(tree, PlayerGui, "HelloWorld");

JSX Typescript (.tsx files)

import Roact from '@rbxts/roact';

const LocalPlayer = game.GetService("Players").LocalPlayer as Player;
const PlayerGui = LocalPlayer.FindFirstChildOfClass("PlayerGui");

const tree = <screengui>
  <textlabel Key="Label" Text="Hello, World!" Size={new UDim2(1, 0, 1, 0)}/>
</screengui>;

Roact.mount(tree, PlayerGui, "HelloWorld");

License

The original Roact library's License can be found here: Roact License

Roact

Install / Use

README