@guanghechen/react-viewmodel

React viewmodel integration providing reactive state management with State and Computed patterns. ## Install * npm ```bash npm install --save @guanghechen/react-viewmodel ``` * pnpm ```bash pnpm add @guanghechen/react-viewmodel ``` ## Usage ### Basic State Management Create reactive state with `State` and consume it with `useStateValue`: ```tsx import { State, useStateValue } from '@guanghechen/react-viewmodel' import React from 'react' // Create a state with recommended '$' suffix naming const count$ = new State(0) const Counter: React.FC = () => { // Use useStateValue to subscribe to state changes const count = useStateValue(count$) const increment = () => count$.setState(prev => prev + 1) const decrement = () => count$.setState(prev => prev - 1) return (

Count: {count}

) } ``` ### Computed Values Create derived state with `Computed`: ```tsx import { State, Computed, useStateValue, useComputed } from '@guanghechen/react-viewmodel' import React from 'react' const firstName$ = new State('John') const lastName$ = new State('Doe') // Create computed value with '$' suffix const fullName$ = new Computed(() => { return `${firstName$.getSnapshot()} ${lastName$.getSnapshot()}` }) const UserProfile: React.FC = () => { const firstName = useStateValue(firstName$) const lastName = useStateValue(lastName$) const fullName = useComputed(fullName$) return (

firstName$.setState(() => e.target.value)} placeholder="First name" /> lastName$.setState(() => e.target.value)} placeholder="Last name" />

Full name: {fullName}

) } ``` ### Complex State with Multiple Dependencies ```tsx import { State, Computed, useStateValue, useComputed } from '@guanghechen/react-viewmodel' import React from 'react' interface ICartItem { id: string name: string price: number quantity: number } const cartItems$ = new State([]) const taxRate$ = new State(0.1) // Computed total price including tax const totalPrice$ = new Computed(() => { const items = cartItems$.getSnapshot() const tax = taxRate$.getSnapshot() const subtotal = items.reduce((sum, item) => sum + item.price * item.quantity, 0) return subtotal * (1 + tax) }) const ShoppingCart: React.FC = () => { const items = useStateValue(cartItems$) const total = useComputed(totalPrice$) const addItem = (item: ICartItem) => { cartItems$.setState(prev => [...prev, item]) } return (

{item.name} - ${item.price} x {item.quantity}

Total: ${total.toFixed(2)}

) } ``` ### ViewModel Management Create and manage ViewModel instances with automatic lifecycle management: ```tsx import { ViewModel, useViewModel } from '@guanghechen/react-viewmodel' import React from 'react' class FileTreeViewModel extends ViewModel { constructor(public readonly options: { currentFilepath: string | null }) { super() } // Your ViewModel implementation } interface IFileTreeContext { viewmodel: FileTreeViewModel } const FileTreeContextType = React.createContext(null) export const FileTreeContextProvider: React.FC<{ children: React.ReactNode }> = props => { const viewmodel: FileTreeViewModel | null = useViewModel(() => { return new FileTreeViewModel({ currentFilepath: null }) }) const context: IFileTreeContext | null = React.useMemo( () => (viewmodel ? { viewmodel } : null), [viewmodel], ) if (!context) return return ( {props.children} ) } FileTreeContextProvider.displayName = 'FileTreeContextProvider' ``` ## API Reference Name | Description :------------------------:|:---------------------------------------------: `useStateValue` | Subscribe to state changes and get current value `useSetState` | Get state setter function only `useState` | Get both state value and setter (similar to React.useState) `useReactState` | Get state value and updater with React-like API `useComputed` | Subscribe to computed value changes `useToggleState` | Get toggle function for boolean state `useObserveKey` | Observe specific object property changes `useObserveSignal` | Observe signal changes with custom comparator `useViewModel` | Create and manage ViewModel instances with automatic disposal ## Naming Convention It is recommended to suffix State and Computed instances with `$` to clearly indicate they are reactive values: ```tsx const count$ = new State(0) const doubleCount$ = new Computed(() => count$.getSnapshot() * 2) const user$ = new State({ name: 'Alice', age: 30 }) ``` [homepage]: https://github.com/guanghechen/react-kit/tree/@guanghechen/react-viewmodel@0.2.18/packages/react-viewmodel#readme