Rextive ⚡

The simplest way to manage reactive state

One concept. Zero complexity. Pure power.

npm install rextive

---

🎯 Why Rextive?

Stop juggling multiple state management patterns. Rextive gives you one powerful concept that handles everything:

// ❌ Traditional React - Multiple APIs to learn
const [count, setCount] = useState(0);
const doubled = useMemo(() => count * 2, [count]);
useEffect(() => console.log("Count changed:", count), [count]);

// ✅ Rextive - One unified API
import { signal } from "rextive";

const count = signal(0);
const doubled = count.to((x) => x * 2);
count.on((value) => console.log("Count changed:", value));

🚀 What Rextive Replaces

Instead of...	Use Rextive
useState + useMemo + useEffect	Just signal
Redux + Redux Toolkit	Just signal
React Query + SWR	Just signal
Zustand + Jotai + Recoil	Just signal

One API. Infinite possibilities.

---

🚀 Quick Start

import { signal, rx } from "rextive/react";

// Create reactive state
const count = signal(0);

// Create an action
const increment = () => count.set((x) => x + 1);

// Render reactively
const Counter = <h1 onClick={increment}>{rx(count)}</h1>;

That's it! No providers. No hooks. No boilerplate.

➡️ Full Getting Started Guide

---

📚 Documentation

Guide	Description
Getting Started	Quick start, counter examples, vanilla JS
Core Concepts	Transform, equality, dependencies, async
Examples	10 real-world examples with code
Patterns	Advanced patterns & best practices
Error Handling	Error handling & tracing
API Reference	Complete API documentation
React Integration	rx(), useScope(), provider()
Operators	debounce, throttle, filter, etc.
Integrations	Immer, Cache, DevTools
Comparison	vs Zustand, React Query, Jotai, Redux
Logic & Testing	Testable services, DI, mocking, isolation
Advanced Topics	Services, custom operators, internal hooks

---

✨ Key Features

Feature	Description
signal()	Unified primitive for state, computed, and async
logic()	Testable service pattern with DI and mocking
rx()	React integration — makes components reactive
.to()	Transform values with chained selectors
.pipe()	Compose operators for complex data flows
wait()	Suspense-ready async handling
loadable()	Manual loading/error/success states
signal.trace()	Error debugging across signal chains
DevTools	Visual debugging panel

---

📦 What's Included

rextive           Core signals (works anywhere)
rextive/react     React bindings (rx, useScope, provider)
rextive/op        Operators (debounce, throttle, filter, etc.)
rextive/immer     Immer integration for immutable updates
rextive/cache     Data caching with strategies
rextive/plugins   Plugins (persistor)
rextive/devtools  DevTools panel

---

🔧 Installation

npm / pnpm / yarn:

npm install rextive
pnpm add rextive
yarn add rextive

Deno (JSR):

import { signal } from "jsr:@ging/rextive";

---

📄 License

MIT © linq2js

---

🌟 Show Your Support

If Rextive helps you build better apps:

• ⭐ Star the repo
• 🐛 Report bugs
• 💡 Suggest features
• 📖 Improve docs

GitHub Repository