TypeScript type definitions for React Lua.
npm package →
TypeScript type definitions for React Lua and roblox-ts, 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.
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
Set up your tsconfig.json
to use the React JSX factory.
"compilerOptions": {
"jsxFactory": "React.createElement",
"jsxFragmentFactory": "React.Fragment"
}
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
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>);
import React, { useState } from "@rbxts/react";
interface CounterProps {
initialCount: number;
}
export function Counter({ initialCount }: CounterProps) {
const [count, setCount] = useState(initialCount);
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),
}}
/>
);
}
import React, { Component, ReactComponent } from "@rbxts/react";
interface CounterProps {
initialCount: number;
}
interface CounterState {
count: number;
}
@ReactComponent
export class Counter extends Component<CounterProps, CounterState> {
state: CounterState = {
count: this.props.initialCount,
};
render() {
return (
<textbutton
Text={`Count: ${this.state.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: () => this.setState({ count: this.state.count + 1 }),
}}
/>
);
}
}
import React, { Component, ErrorInfo, ReactComponent } from "@rbxts/react";
interface ErrorBoundaryProps {
fallback: (error: unknown) => React.Element;
}
interface ErrorBoundaryState {
hasError: boolean;
message?: unknown;
}
@ReactComponent
export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
state: ErrorBoundaryState = {
hasError: false,
};
componentDidCatch(message: unknown, info: ErrorInfo) {
warn(message, info.componentStack);
this.setState({
hasError: true,
message: `${message} ${info.componentStack}`,
});
}
render() {
if (this.state.hasError) {
return this.props.fallback(this.state.message);
} else {
return this.props.children;
}
}
}
- 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
This project is licensed under the MIT license.