open-index/open-npm huggingface dataset:
npm package: @rbxts/roact-compat-internal
Description: This package serves as a compatibility bridge between `react` and legacy [`Roact`](https://github.com/Roblox/roact). It can be used when migrating an existing codebase to React, but new code shouldn't use this package.
Author: jsdotlua
Latest version: 0.3.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `roact-compat`

This package serves as a compatibility bridge between `react` and legacy [`Roact`](https://github.com/Roblox/roact). It can be used when migrating an existing codebase to React, but new code shouldn't use this package.

## API

TODO
npm package: @rbxts/roact-flipper
Description: <div align="center"><img width=25% src="https://github.com/Reselim/roact-flipper/blob/master/.github/logo.svg"></div> <h1 align="center">roact-flipper-TS</h1> <div align="center">     <a href="https://github.com/roblox-ts/roblox-ts"> 		<img src="https://i
Latest version: 2.1.0-ts.5

<div align="center"><img width=25% src="https://github.com/Reselim/roact-flipper/blob/master/.github/logo.svg"></div>
<h1 align="center">roact-flipper-TS</h1>
<div align="center">
    <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://www.npmjs.com/package/@rbxts/roact-flipper">
		<img src="https://badge.fury.io/js/@rbxts%2Froact-flipper.svg"></img>
	</a>
</div>

<div align="center">
	A typescript port of <a href='https://github.com/Reselim/roact-flipper'>roact-flipper</a>: Hooks and utility functions to join Roact and Flipper.
</div>

<div>&nbsp;</div>

## Installation

You can install it via `npm i @rbxts/roact-flipper`.

## License

The original roact-flipper License can be found here: [roact-flipper License](https://github.com/Reselim/roact-flipper/blob/master/LICENSE)
npm package: @rbxts/roact-hooked
Description: Roact hooks based on Kampfkarren's hooks & React Hooks
Author: littensy
Latest version: 2.6.2

# [@rbxts/roact-hooked](https://www.npmjs.com/package/@rbxts/roact-hooked)

Roact hooks based on [Kampfkarren's hooks](https://github.com/Kampfkarren/roact-hooks) & [React Hooks](https://reactjs.org/docs/hooks-intro.html)

## Install

```
npm install @rbxts/roact-hooked
```

## Usage with hook detection

Version 2.4.0 adds the `withHookDetection` function to allow hooks in function components without manually using HOCs.

It modifies `Roact.createElement` to detect hook use and wrap them in `withHooks` or `withHooksPure` HOCs.

```tsx
// MyComponent.tsx
import Roact from "@rbxts/roact";
import { markPureComponent, useEffect, useState } from "@rbxts/roact-hooked";

interface Props {
	name?: string;
}

export default function MyComponent({ name = "David Baszucki" }: Props) {
	const [count, setCount] = useState(0);

	useEffect(() => {
		print("Counter: " + count);
	}, [count]);

	return (
		<textbutton
			Size={new UDim2(1, 0, 1, 0)}
			Text={`${name} pressed ${count} times`}
			Event={{
				Activated: () => setCount((value) => value + 1),
			}}
		/>
	);
}

// Optional: mark the component as a PureComponent
markPureComponent(MyComponent);
```

```tsx
// mount.client.ts
import Roact from "@rbxts/roact";
import { withHookDetection } from "@rbxts/roact-hooked";
import { Players } from "@rbxts/services";
import MyComponent from "./MyComponent";

withHookDetection(Roact);

Roact.mount(<MyComponent />, Players.LocalPlayer.WaitForChild("PlayerGui"));
```

## Usage with HOCs

Using the HOCs directly is still possible if you do not want to modify `Roact.createElement` for hook detection.

```tsx
import Roact from "@rbxts/roact";
import { withHooks, withHooksPure, useEffect, useState } from "@rbxts/roact-hooked";

interface Props {
	name?: string;
}

function MyComponent({ name = "David Baszucki" }: Props) {
	const [count, setCount] = useState(0);

	useEffect(() => {
		print("Counter: " + count);
	}, [count]);

	return (
		<textbutton
			Size={new UDim2(1, 0, 1, 0)}
			Text={`${name} pressed ${count} times`}
			Event={{
				Activated: () => setCount((value) => value + 1),
			}}
		/>
	);
}

export default withHooks(MyComponent);

// Optional: wrap the FC in a PureComponent instead
export default withHooksPure(MyComponent);
```
npm package: @rbxts/roact-rodux-hooked
Description: Hooks for Rodux with roact-hooked
Author: littensy
Latest version: 1.1.3

# [@rbxts/roact-rodux-hooked](https://www.npmjs.com/package/@rbxts/roact-rodux-hooked)

Useful hooks for Rodux with [roact-hooked](https://www.npmjs.com/package/@rbxts/roact-hooked)

⚙️ This library only exists for use with roact-hooked

🔌 Compatible with [roselect](https://www.npmjs.com/package/@rbxts/roselect)

📚 Based on [@types/react-redux](https://www.npmjs.com/package/@types/react-redux)

## Usage

```tsx
import Roact from "@rbxts/roact";
import { useDispatch, useSelector } from "@rbxts/roact-rodux-hooked";
import { withHooks } from "@rbxts/roact-hooked";
import { Store, StoreState, increment } from "client/store";

function Counter() {
	const count = useSelector((state: StoreState) => state.count);
	const dispatch = useDispatch<Store>();

	return (
		<textbutton
			Text={`Counter: ${count}`}
			BackgroundColor3={Color3.fromRGB(80, 120, 200)}
			Size={new UDim2(0.5, 0, 1, 0)}
			Event={{
				Activated: () => dispatch(increment()),
			}}
		/>
	);
}

export default withHooks(Counter);
```

```tsx
import Roact from "@rbxts/roact";
import { StoreProvider } from "@rbxts/roact-rodux-hooked";
import { configureStore } from "./store";

export default function App() {
	return <StoreProvider store={configureStore()}>...</StoreProvider>;
}
```

```ts
import { TypedUseSelectorHook, useDispatch, useSelector, useStore } from "@rbxts/roact-rodux-hooked";
import { RootDispatch, RootState, RootStore } from "./store";

export const useRootStore = useStore as () => RootStore;
export const useRootDispatch = useDispatch as () => RootDispatch;
export const useRootSelector = useSelector as TypedUseSelectorHook<RootState>;
```
npm package: @rbxts/roact-router
Description: Minimal React Router implementation for Roact
Author: Reselim
Latest version: 1.1.6

<p align="center">
	<img src=".github/logo.svg" height="170">
	<br><br>
	<a href=""><i>Documentation (TODO)</i></a>
</p>

# Installation

Roact Router searches for a Roact module with the same parent as it. If it doesn't find Roact, it will fail to load.

## With Rojo 0.6.0+

Add this repository as a Git submodule into the directory that you prefer to store your packages in.

```
git submodule add https://github.com/Reselim/roact-router packages/RoactRouter
```

This example assumes your packages directory is "packages".

## Without Rojo

Grab the latest .rbxm file from the [releases page](https://github.com/Reselim/roact-router/releases) and drag it into Studio. Make sure it's under the same parent as Roact.

## Using [roblox-ts](https://github.com/roblox-ts/roblox-ts)

Install with npm:

```
npm i @rbxts/roact-router
```

# License

Roact Router is licensed under the [MIT license](LICENSE).
npm package: @rbxts/roact-spritesheet
Description: This is a handy spritesheet component for Roact. It can easily be used with Evaera's Radial Sprite Sheet generator, but works for general purpose spritesheets too.
Latest version: 1.0.1

# Roact Spritesheet

This is a handy spritesheet component for Roact. It can easily be used with [Evaera's Radial Sprite Sheet generator](https://eryn.io/RadialSpriteSheetGenerator/), but works for general purpose spritesheets too.

## Installation

Use npm to install:

```bash
npm install @rbxts/roact-spritesheet
```

## Usage

Documentation is included inline. The Spritesheet component also accepts any props from the ImageLabel class.
npm package: @rbxts/roact-wm
Description: <div align="center"> 	<img src="https://i.imgur.com/ngBo28Q.png"></img>         <h1>Roact Window Manager</h1> 	<a href="https://www.npmjs.com/package/@rbxts/roact-wm"> 		<img src="https://badge.fury.io/js/%40rbxts%2Froact-wm.svg"></img> 	</a> 	<br/>      
Author: Rimuy
Latest version: 0.1.7

<div align="center">
	<img src="https://i.imgur.com/ngBo28Q.png"></img>
        <h1>Roact Window Manager</h1>
	<a href="https://www.npmjs.com/package/@rbxts/roact-wm">
		<img src="https://badge.fury.io/js/%40rbxts%2Froact-wm.svg"></img>
	</a>
	<br/>
        Experimental simple window management library for Roact.
</div>

`Component`
```lua
local function Window()
        return Roact.createElement(RoactWM.ComponentAdapter, {
                render = function(history)
                        return Roact.createElement(RoactWM.Window, {
                                Id = "ExampleWindow",
                                OnOpen = function()
                                        print("My window has open!")
                                end,
                                OnClosed = function()
                                        print("My window has closed.")
                                end,
                                OnFocused = function()
                                        print("Focus gained")
                                end,
                                OnFocusReleased = function()
                                        print("Focus released")
                                end,
                                BorderSizePixel = 2,
                                Position = UDim2.fromOffset(50, 50),
                                Size = UDim2.fromOffset(500, 200),
                        }, {
                                Text = Roact.createElement("TextLabel", {
                                        BackgroundTransparency = 1,
                                        Size = UDim2.fromScale(1, 1),
                                        Text = ("History Size: %s"):format(history:size()),
                                        TextSize = 18,
                                })
                        })
                end,
        })
end
```

`Controller`
```lua
RoactWM.Adapter(function(history)
	InputService.InputBegan:Connect(function(input)
		if input.KeyCode == Enum.KeyCode.One then
			history:push("ExampleWindow")
		elseif input.KeyCode == Enum.KeyCode.Two then
			history:clear()
		end
	end)
end)
```

# Demo
This demonstration's source code is available in [Example](Example).

![RoactWM Demonstration](https://i.imgur.com/ot8Zah5.gif)

# Installation
### Source
```bash
git clone https://github.com/HylianBasement/roact-wm.git ./Vendor
```

### roblox-ts
```bash
npm i @rbxts/roact-wm
```