@rbxts/roact

TypeScript support for Roact

Stats

StarsIssuesVersionUpdatedCreatedSize
@rbxts/roact
1.4.0-ts.24 months ago3 years agoMinified + gzip package size for @rbxts/roact in KB

Readme

Roact-TS

A typescript port of Roact, a declarative UI library inspired by React.
 

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.createElement"
    },
}

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.