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](https://roblox.github.io/roact). 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](https://github.com/roblox-ts/roblox-ts), as well as:
```json
{
"compilerOptions": {
"jsx": "react",
"jsxFactory": "Roact.jsx",
"jsxFragmentFactory": "Roact.Fragment",
},
}
```
### Regular TypeScript
```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)
```tsx
import Roact from '@rbxts/roact';
const LocalPlayer = game.GetService("Players").LocalPlayer as Player;
const PlayerGui = LocalPlayer.FindFirstChildOfClass("PlayerGui");
const tree = ;
Roact.mount(tree, PlayerGui, "HelloWorld");
```
## License
The original Roact library's License can be found here: [Roact License](https://github.com/Roblox/roact/blob/520f8e685ab174654c8b3a99c3f243cadadc1c7d/LICENSE.txt)
---
_Source: https://npm.io/package/@rbxts/roact · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
