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

$3

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

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

$3

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

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

🚀 Examples

$3

Use to enable Reflex hooks and components:

`tsx
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(


{/ Your app /}
{createPortal(, playerGui)}

,
);
`

$3

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

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

export const useRootProducer: UseProducerHook = useProducer;
export const useRootSelector: UseSelectorHook = useSelector;
`

$3

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

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

return (
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.