hairyf Based on valtio-define v1.0.1. A Valtio-based state management library with 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 |
| Signal | JSX component for inline reactive values | advanced-signal |
| 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 |
| Persistent Plugin | Persist state to storage | feature-persistent-plugin |
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>
)
}