https://github.com/littensy/react-reflex

♻️ React hooks and components for Reflex
https://github.com/littensy/react-reflex

Last synced: 29 days ago
JSON representation

♻️ React hooks and components for Reflex

• Host: GitHub
• URL: https://github.com/littensy/react-reflex
• Owner: littensy
• License: mit
• Created: 2024-02-16T01:52:32.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-02-25T19:28:36.000Z (11 months ago)
• Last Synced: 2024-03-26T09:47:47.207Z (10 months ago)
• Language: Lua
• Size: 121 KB
• Stars: 4
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-react-lua - **Repository**
• awesome-react-lua - **Repository**

README

        


  


    

  

  
React Reflex

  


    An all-in-one state container.

    


    npm package →

  




![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/littensy/react-reflex/ci.yml?style=for-the-badge&branch=master&logo=github)

[![NPM Version](https://img.shields.io/npm/v/@rbxts/react-reflex.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@rbxts/react-reflex)

[![GitHub License](https://img.shields.io/github/license/littensy/react-reflex?style=for-the-badge)](LICENSE.md)



**Reflex** is a simple state container inspired by [Rodux](https://github.com/roblox/rodux) and [Silo](https://github.com/sleitnick/rbxts-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`](https://github.com/littensy/rbxts-react) or [`jsdotlua/react`](https://github.com/jsdotlua/react-lua).

See the [React Reflex documentation](https://littensy.github.io/reflex/docs/guides/roact-reflex/) for more information.

## 📦 Setup

### TypeScript

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

```

### Wally

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

```toml

[dependencies]

ReactReflex = "littensy/react-reflex@VERSION"

```

## 🚀 Examples

### Mounting your app

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)}

		

	,

);

```

### Typed hooks

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;

```

### Counter

```tsx

import React from "@rbxts/react";

import { useRootProducer, useRootSelector } from "./hooks";

export function Counter() {

	const producer = useRootProducer();

	const count = useRootSelector((state) => state.count);

	return (

		 producer.increment(),

				MouseButton2Click: () => producer.decrement(),

			}}

		/>

	);

}

```

## 📚 Resources

- [Reflex Documentation](https://littensy.github.io/reflex/) - Learn about Reflex's core concepts and API

- [Reflex Repository](https://github.com/littensy/reflex) - The official Reflex repository

- [React Lua Documentation](https://jsdotlua.github.io/react-lua/) - A comprehensive guide for the differences between Roact and React

## 📝 License

This project is licensed under the [MIT license](LICENSE).