@rbxts/react-roblox

@rbxts/react

Typescript definitions for React Lua.
npm package →

Roblox-TS type definitions for React Lua, sourced from the official React types. Currently, only @rbxts/react and @rbxts/react-roblox are available.

If we're missing any deviations from React Lua, please open an issue or pull request to let us know!

[!IMPORTANT] This package requires roblox-ts@next to use Generic JSX.

📦 Setup

Installation

Install the @rbxts/react and @rbxts/react-roblox packages.

npm install @rbxts/react @rbxts/react-roblox
yarn add @rbxts/react @rbxts/react-roblox
pnpm add @rbxts/react @rbxts/react-roblox # 🔴 See below

Configuration

Set up your tsconfig.json to use the React JSX factory.

"compilerOptions": {
  "jsxFactory": "React.createElement",
  "jsxFragmentFactory": "React.Fragment"
}

Usage with PNPM

If you're using PNPM as your package manager, you'll need to create a .npmrc file in the root of your project with the following content:

node-linker=hoisted

🚀 Examples

Mounting your app

import React, { StrictMode } from "@rbxts/react";
import { createPortal, createRoot } from "@rbxts/react-roblox";

const root = createRoot(new Instance("Folder"));

root.render(<StrictMode>{createPortal(<App />, playerGui)}</StrictMode>);

Counter

import React, { useState } from "@rbxts/react";

export function Counter() {
  const [count, setCount] = useState(0);

  return (
    <textbutton
      Text={`Count: ${count}`}
      AnchorPoint={new Vector2(0.5, 0.5)}
      Size={new UDim2(0, 100, 0, 50)}
      Position={new UDim2(0.5, 0, 0.5, 0)}
      Event={{
        Activated: () => setCount(count + 1),
      }}
    >
  );
}

📚 Resources

• React Documentation - Learn about React's core concepts and API
• React Lua Documentation - A comprehensive guide for the differences between Roact and React
• JS.Lua Repository - The source code for React Lua

📝 License

This project is licensed under the MIT license.