# reactivity-store

> a reactive store, make you write reactive logic in react app just like zustand

Latest version **0.4.1** (published 2026-10-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install reactivity-store
pnpm add reactivity-store
yarn add reactivity-store
bun add reactivity-store
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.4.1 |
| Published | 2026-10-15 |
| First published | 2023-06-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 395.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 16 |
| Author | MrWangJustToDo |
| Maintainers | mrwang555 |
| Keywords | state-management, reactive, vue, react |

## Links

- npm: https://www.npmjs.com/package/reactivity-store
- Repository: https://github.com/MrWangJustToDo/reactivity-store
- Homepage: https://mrwangjusttodo.github.io/reactivity-store
- Issues: https://github.com/MrWangJustToDo/reactivity-store/issues
- npm.io page: https://npm.io/package/reactivity-store

## Dependencies (3)

- [@vue/shared](https://npm.io/package/@vue/shared.md) ~3.5.44
- [@vue/reactivity](https://npm.io/package/@vue/reactivity.md) ~3.5.44
- [use-sync-external-store](https://npm.io/package/use-sync-external-store.md) ^1.6.0

## Alternatives

- [@reckona/mreact-store](https://npm.io/package/@reckona/mreact-store.md) — 976 weekly downloads
- [regular-state](https://npm.io/package/regular-state.md) — 410 weekly downloads
- [@pacote/flux-actions](https://npm.io/package/@pacote/flux-actions.md) — 65 weekly downloads
- [@pilotlab/lux-debug](https://npm.io/package/@pilotlab/lux-debug.md) — 39 weekly downloads
- [vue-persist-state](https://npm.io/package/vue-persist-state.md) — 19 weekly downloads

## Recent versions

- 0.4.1 (latest) — 2026-10-15
- 0.3.5-beta.0 (beta) — 2024-09-02
- 0.4.0 — 2026-03-11
- 0.3.12 — 2025-10-14
- 0.3.11 — 2025-06-13
- 0.3.10 — 2025-06-12
- 0.3.9 — 2024-12-19
- 0.3.8 — 2024-12-04
- 0.3.7 — 2024-11-02
- 0.3.6 — 2024-10-13
- 0.3.5 — 2024-09-02
- 0.3.4 — 2024-05-13
- 0.3.3 — 2024-05-13
- 0.3.2 — 2024-02-06
- 0.3.1 — 2024-01-03
- … 30 more at https://npm.io/package/reactivity-store/versions

## README

<div align="center">

# 🚀 RStore

**Vue-inspired Reactive State Management for React**

[![Deploy](https://github.com/MrWangJustToDo/r-store/actions/workflows/deploy.yml/badge.svg)](https://github.com/MrWangJustToDo/r-store/actions/workflows/deploy.yml)
[![npm](https://img.shields.io/npm/v/reactivity-store)](https://www.npmjs.com/package/reactivity-store)
![downloads](https://img.shields.io/npm/dm/reactivity-store)

Bring Vue's reactivity system to React with zustand-like simplicity.
**Direct mutation, automatic UI updates - no manual subscriptions needed!**

[Documentation](https://mrwangjusttodo.github.io/r-store/) · [Getting Started](#installation) · [Examples](#quick-start)

</div>

---

## Why RStore?

- 🎯 **Direct Mutation** - No `setState`, just mutate and UI updates automatically
- ⚡ **Vue Reactivity** - Use `ref()`, `reactive()`, `computed()` from @vue/reactivity
- 🪝 **Zustand-like API** - Clean, minimal API design
- 🔌 **Built-in Middleware** - Persist, actions, Redux DevTools out of the box
- 📘 **TypeScript First** - Full type safety and excellent IntelliSense
- 🚀 **Zero Boilerplate** - No reducers, no dispatch, no manual subscriptions

## Installation

```bash
npm install reactivity-store
# or
pnpm add reactivity-store
```

## Quick Start

### 🟢 Vue Approach

For **Vue developers** or those wanting fine-grained reactivity:

```tsx
import { createStore, ref, computed } from "reactivity-store";

const useCounter = createStore(() => {
  const count = ref(0);
  const doubled = computed(() => count.value * 2);

  const increment = () => count.value++; // Direct mutation!

  return { count, doubled, increment };
});

function App() {
  const { count, doubled, increment } = useCounter();
  return (
    <div>
      <p>Count: {count}</p>
      <p>Doubled: {doubled}</p>
      <button onClick={increment}>+1</button>
    </div>
  );
}
```

### 🔵 React Approach

For **React developers** who want simplicity without learning Vue APIs:

```tsx
import { createState } from "reactivity-store";

const useCounter = createState(() => ({ count: 0 }), {
  withActions: (state) => ({
    increment: () => state.count++,
    decrement: () => state.count--,
  }),
});

function App() {
  const { count, increment, decrement } = useCounter();
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+1</button>
      <button onClick={decrement}>-1</button>
    </div>
  );
}
```

## Two Approaches, One Library

|              | 🟢 Vue Approach                | 🔵 React Approach             |
| ------------ | ------------------------------ | ----------------------------- |
| **Best for** | Vue developers                 | React developers              |
| **APIs**     | `ref`, `reactive`, `computed`  | Plain objects + actions       |
| **Features** | Auto-computed, lifecycle hooks | Middleware: persist, DevTools |
| **Use**      | `createStore`                  | `createState`                 |

## Built-in Middleware

### 💾 Persistent State

```tsx
const useSettings = createState(() => ({ theme: "light", language: "en" }), {
  withPersist: "app-settings", // Auto-saves to localStorage
  withActions: (state) => ({
    setTheme: (theme) => (state.theme = theme),
  }),
});
```

### 🛠️ Redux DevTools

```tsx
const useCounter = createState(() => ({ count: 0 }), {
  withNamespace: "Counter", // Shows up in Redux DevTools
  withActions: (state) => ({
    increment: () => state.count++,
  }),
});
```

### ⚡ Performance Options

```tsx
const useStore = createState(() => ({ nested: { count: 0 } }), {
  withDeepSelector: true, // Track nested changes (default: true)
  withStableSelector: false, // Stable selector for performance
  withActions: (state) => ({
    increment: () => state.nested.count++,
  }),
});
```

## Advanced Features

### Lifecycle Hooks

```tsx
import { createStoreWithComponent, ref, onMounted, onUnmounted } from "reactivity-store";

const Timer = createStoreWithComponent({
  setup: () => {
    const seconds = ref(0);
    let timer;

    onMounted(() => {
      timer = setInterval(() => seconds.value++, 1000);
    });

    onUnmounted(() => {
      clearInterval(timer);
    });

    return { seconds };
  },
});

function App() {
  return <Timer>{({ seconds }) => <div>{seconds}s</div>}</Timer>;
}
```

### Component-local Reactive State

```tsx
import { useReactiveState } from "reactivity-store";

function TodoList() {
  const [state, setState] = useReactiveState({
    todos: [],
    filter: "all",
  });

  const addTodo = (text) => {
    setState((s) => {
      s.todos.push({ id: Date.now(), text, done: false });
    });
  };

  return <div>{/* ... */}</div>;
}
```

### State Subscriptions

```tsx
const useCounter = createState(() => ({ count: 0 }), { withActions: (s) => ({ increment: () => s.count++ }) });

// Subscribe anywhere in your app
useCounter.subscribe(
  (state) => state.count,
  () => console.log("Count changed:", useCounter.getReadonlyState().count)
);
```

## Comparison

<table>
<tr>
<td width="33%">

**Traditional React**

```tsx
const [count, setCount] = useState(0);

setCount((prev) => prev + 1);
```

</td>
<td width="33%">

**RStore (Vue Approach)**

```tsx
const count = ref(0);

count.value++;
```

</td>
<td width="33%">

**RStore (React Approach)**

```tsx
const useCount = createState(() => ({ count: 0 }), {
  withActions: (s) => ({
    increment: () => s.count++,
  }),
});
```

</td>
</tr>
</table>

## API Overview

| API                        | Purpose                                                            |
| -------------------------- | ------------------------------------------------------------------ |
| `createStore`              | Vue-style reactive stores with `ref()`, `reactive()`, `computed()` |
| `createState`              | React-style state with actions and middleware                      |
| `createStoreWithComponent` | Component-scoped stores with lifecycle hooks                       |
| `useReactiveState`         | Component-local reactive state (like `useState` but reactive)      |
| `useReactiveEffect`        | Side effects with automatic dependency tracking                    |

## Documentation

Visit [https://mrwangjusttodo.github.io/r-store/](https://mrwangjusttodo.github.io/r-store/) for complete documentation:

- [What is RStore?](https://mrwangjusttodo.github.io/r-store/what)
- [Why RStore?](https://mrwangjusttodo.github.io/r-store/why)
- [Vue Approach - createStore](https://mrwangjusttodo.github.io/r-store/createStore)
- [React Approach - createState](https://mrwangjusttodo.github.io/r-store/createState)
- [Lifecycle Hooks](https://mrwangjusttodo.github.io/r-store/createStoreWithLifeCycle)
- [Use Cases](https://mrwangjusttodo.github.io/r-store/use-cases)

## License

MIT © [MrWangJustToDo](https://github.com/MrWangJustToDo)

---
_Source: https://npm.io/package/reactivity-store · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._