open-index/open-npm huggingface dataset:
npm package: @fireproof/cloud-quick-silver-api
Description: <p align="right">   <img src="https://img.shields.io/bundlephobia/minzip/%40fireproof%2Fcore" alt="Package size">   <a href="https://github.com/fireproof-storage/fireproof/actions/workflows/ci.yaml">     <img src="https://github.com/fireproof-storage/fire
Latest version: 0.0.0-smoke-6623f866-1771883382
npm package: @fireproof/cloud-quick-silver-cf
Description: <p align="right">   <img src="https://img.shields.io/bundlephobia/minzip/%40fireproof%2Fcore" alt="Package size">   <a href="https://github.com/fireproof-storage/fireproof/actions/workflows/ci.yaml">     <img src="https://github.com/fireproof-storage/fire
Latest version: 0.0.0-smoke-6623f866-1771883441
npm package: @fireproof/cloud-quick-silver-types
Description: <p align="right">   <img src="https://img.shields.io/bundlephobia/minzip/%40fireproof%2Fcore" alt="Package size">   <a href="https://github.com/fireproof-storage/fireproof/actions/workflows/ci.yaml">     <img src="https://github.com/fireproof-storage/fire
Latest version: 0.0.0-smoke-6623f866-1771883528
npm package: @firere/roact
Description: TypeScript support for Roact, with some extra features
Author: Firere
Latest version: 1.5.0-ts.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

<div align="center"><img src="https://australis.dev/roact-tsx.png?v=3"/></div>
<h1 align="center">@firere/roact</h1>
<div align="center">
	<a href="https://firere.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/@firere/roact">
		<img src="https://img.shields.io/npm/v/@firere/roact"></img>
	</a>
</div>

<div align="center">
	A TypeScript port of <a href='https://github.com/Firere/roact'>Roact</a>, with some extra features.
</div>

<div> </div>

## Installation

You can install it via `npm i @firere/roact`.

## Usage

For a detailed guide and examples, check out [the Lua repo](https://firere.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.createElement"
  }
}
```

### Regular TypeScript

```typescript
import Roact from "@firere/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)

```ts
import Roact from "@firere/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](https://github.com/Roblox/roact/blob/master/LICENSE)