### Install React Reflex via npm/yarn/pnpm

Source: https://github.com/littensy/react-reflex/blob/main/README.md

This snippet provides commands to install the `@rbxts/react-reflex` package using popular JavaScript package managers like npm, yarn, and pnpm. It's the initial step for integrating React Reflex into a TypeScript project.

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

--------------------------------

### Mount React Reflex Application with ReflexProvider

Source: https://github.com/littensy/react-reflex/blob/main/README.md

This example demonstrates how to set up the `ReflexProvider` component, which is essential for enabling Reflex hooks and components within your React application. It shows the basic structure for integrating Reflex into the React component tree, typically at the root of your app.

```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(
	<StrictMode>
		<ReflexProvider producer={producer}>
			{/* Your app */}
			{createPortal(<App />, playerGui)}
		</ReflexProvider>
	</StrictMode>,
);
```

--------------------------------

### Configure React Reflex with Wally

Source: https://github.com/littensy/react-reflex/blob/main/README.md

This snippet shows how to add `littensy/react-reflex` as a dependency in your `wally.toml` file. This is an alternative installation method for Roblox projects using the Wally package manager.

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

--------------------------------

### Implement a Counter Component with React Reflex Hooks

Source: https://github.com/littensy/react-reflex/blob/main/README.md

This example provides a complete implementation of a simple counter component using the custom typed hooks `useRootProducer` and `useRootSelector`. It demonstrates how to retrieve state (`count`) and dispatch actions (`increment`, `decrement`) through button clicks, showcasing basic state management with React Reflex.

```tsx
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(),
			}}
		/>
	);
}
```

--------------------------------

### Create Typed Reflex Hooks for State Management

Source: https://github.com/littensy/react-reflex/blob/main/README.md

This snippet illustrates how to create custom, strongly typed hooks (`useRootProducer`, `useRootSelector`) by wrapping the generic `useProducer` and `useSelector` from `@rbxts/react-reflex`. This approach enhances type safety and improves the developer experience when working with specific state producers.

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

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

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.