@rbxts/react-reflex

React Reflex

An all-in-one state container.
npm package →

Reflex is a simple state container inspired by Rodux and Silo, designed to be an all-in-one solution for managing and reacting to state in Roblox games.

React Reflex provides React hooks and components for Reflex using either @rbxts/react or jsdotlua/react.

See the React Reflex documentation for more information.

📦 Setup

TypeScript

Install the @rbxts/react-reflex package using your package manager of choice.

npm install @rbxts/react-reflex
yarn add @rbxts/react-reflex
pnpm add @rbxts/react-reflex

Wally

Add littensy/react-reflex to your wally.toml file.

[dependencies]
ReactReflex = "littensy/react-reflex@VERSION"

🚀 Examples

Mounting your app

Use <ReflexProvider> to enable Reflex hooks and components:

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

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

root.render(
	<StrictMode>
		<ReflexProvider producer={producer}>
			{/* Your app */}
			{createPortal(<App />, playerGui)}
		</ReflexProvider>
	</StrictMode>,
);

Typed hooks

Custom hooks can be created to provide typed hooks for your state:

import { useProducer, useSelector, UseProducerHook, UseSelectorHook } from "@rbxts/react-reflex";

export const useRootProducer: UseProducerHook<RootProducer> = useProducer;
export const useRootSelector: UseSelectorHook<RootProducer> = useSelector;

Counter

import React from "@rbxts/react";
import { useRootProducer, useRootSelector } from "./hooks";

export function Counter() {
	const producer = useRootProducer();
	const count = useRootSelector((state) => state.count);

	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: () => producer.increment(),
				MouseButton2Click: () => producer.decrement(),
			}}
		/>
	);
}

📚 Resources

• Reflex Documentation - Learn about Reflex's core concepts and API
• Reflex Repository - The official Reflex repository
• React Lua Documentation - A comprehensive guide for the differences between Roact and React

📝 License

This project is licensed under the MIT license.