Package Exports

@rbxts/react-roblox
@rbxts/react-roblox/src/init.lua

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@rbxts/react-roblox) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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.