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:

importReact,{StrictMode}from"@rbxts/react";import{createPortal,createRoot}from"@rbxts/react-roblox";import{ReflexProvider}from"@rbxts/react-reflex";constroot=createRoot(newInstance("Folder"));root.render(<StrictMode><ReflexProviderproducer={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";exportconstuseRootProducer: UseProducerHook<RootProducer>=useProducer;exportconstuseRootSelector: UseSelectorHook<RootProducer>=useSelector;

Counter

importReactfrom"@rbxts/react";import{useRootProducer,useRootSelector}from"./hooks";exportfunctionCounter(){constproducer=useRootProducer();constcount=useRootSelector((state)=>state.count);return(<textbuttonText={`Count: ${count}`}AnchorPoint={newVector2(0.5,0.5)}Size={newUDim2(0,100,0,50)}Position={newUDim2(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.