https://github.com/littensy/rbxts-react

React for Roblox-TS
https://github.com/littensy/rbxts-react

roact roblox-ts

Last synced: about 2 months ago
JSON representation

React for Roblox-TS

• Host: GitHub
• URL: https://github.com/littensy/rbxts-react
• Owner: littensy
• License: mit
• Archived: true
• Created: 2023-07-07T02:46:40.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-02-16T07:38:34.000Z (12 months ago)
• Last Synced: 2024-12-01T08:57:58.499Z (about 2 months ago)
• Topics: roact, roblox-ts
• Language: Lua
• Homepage: https://www.npmjs.com/package/@rbxts/react-ts
• Size: 256 KB
• Stars: 11
• Watchers: 1
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-react-lua - **Repository**
• awesome-react-lua - React - ts](https://roblox-ts.com). (Hooks / Pretty React Hooks <img src="roblox-ts.svg" width="18px" />)

README

        
# [`@rbxts/react-ts`](https://www.npmjs.com/package/@rbxts/react-ts)

To allow React in Roblox-TS, this package combines `jsdotlua/react` and `jsdotlua/roact-compat` and re-exports them with typings from `@rbxts/roact` some types from [the DefinitelyTyped package](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/v17/index.d.ts).

The package also needs to be installed with an alias to trick the compiler into using this package instead of the _actual_ Roact package.

> [!IMPORTANT]

> This package is superseded by [littensy/rbxts-react](https://github.com/littensy/rbxts-react).

## 📦 Installation

### ⚛️ React for Roblox-TS

For this package to work, it needs the `@rbxts/roact` alias so that Roblox-TS can use this package for your TSX files.

You can install with an alias like so:

```bash

npm install @rbxts/roact@npm:@rbxts/react-ts@latest

yarn add @rbxts/roact@npm:@rbxts/react-ts@latest

pnpm add @rbxts/roact@npm:@rbxts/react-ts@latest # SEE NOTE BELOW

```

Make sure the following alias or something similar is in your `package.json`:

```json

"dependencies": {

    "@rbxts/roact": "npm:@rbxts/react-ts",

}

```

#### ⚠️ Note for pnpm users

PNPM symlinks packages by default, which doesn't work well with Rojo. You can disable this behavior by adding the following to your `.npmrc`:

```properties

node-linker=hoisted

```

### 📎 ReactRoblox

You can install `@rbxts/react-roblox` to render React components with `createRoot` instead of `Roact.mount`.

```bash

npm install @rbxts/react-roblox

yarn add @rbxts/react-roblox

pnpm add @rbxts/react-roblox

```

## ✅ Compatibility

Installing this package will install React, ReactRoblox, etc. directly under the `@rbxts` folder in located ReplicatedStorage.

If your package depends on React packages, they may be imported in Luau via `require(script.Parent...Parent.MODULE)` or `require(...node_modules["@rbxts"].MODULE)` depending on your project structure.

    See explorer view

    

## 📋 Sources

Types are derived from [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/v17/index.d.ts).

Dependencies of this package were published from [littensy/react-lua](https://github.com/littensy/react-lua), which is a fork of [jsdotlua/react-lua](https://github.com/jsdotlua/react-lua).