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