hairyf Based on valtio-define v1.3.0 (updated since v1.2.1). A Valtio-based state management library with a Pinia-like API for React applications.
Overview
valtio-define provides a factory function for creating reactive stores with state, actions, and getters. Built on top of Valtio, it offers a familiar API similar to Pinia with full TypeScript support.
Core References
| Topic | Description | Reference |
|---|---|---|
| defineStore | Core API for creating reactive stores | core-define-store |
| useStore | React hook for accessing store state | core-use-store |
| Types | TypeScript types and interfaces | core-types |
Advanced Features
| Topic | Description | Reference |
|---|---|---|
| Subscriptions | Subscribe to state changes | advanced-subscribe |
| Patch | Update state with patch operations | advanced-patch |
| Store to State | Convert store to useState-like hooks | advanced-store-to-state |
Features
| Topic | Description | Reference |
|---|---|---|
| Plugin System | Extend stores with plugins | feature-plugin-system |
| Persist Plugin | Persist state to storage | feature-plugin-persist |
| Signal Plugin | JSX inline signals via $signal + custom JSX runtime |
feature-plugin-signal |
Quick Start
import { defineStore, useStore } from 'valtio-define'
const store = defineStore({
state: () => ({ count: 0 }),
actions: {
increment() { this.count++ },
},
getters: {
doubled() { return this.count * 2 },
},
})
function Counter() {
const state = useStore(store)
return (
<div>
<div>Count: {state.count}</div>
<div>Doubled: {state.doubled}</div>
<button
</div>
)
}