Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@rbxts/react-reflex) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.