{"library":"mobx-utils","title":"MobX Utilities","description":"MobX-utils is a companion library for MobX, offering a collection of common patterns and utility functions to simplify reactive state management in applications. It provides solutions for handling asynchronous operations, view models, observable resources, and more, building directly on top of the core MobX library. The current stable version is 6.1.1 and it actively tracks the major versions of MobX, currently requiring `mobx@^6.0.0` as a peer dependency. Key differentiators include its `fromPromise` utility for observable promise states, `createViewModel` for easily creating editable views of data, and `lazyObservable` for demand-driven data fetching. Its release cadence is tied to MobX's evolution, with updates typically addressing compatibility or introducing new patterns.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install mobx-utils"],"cli":null},"imports":["import { fromPromise } from 'mobx-utils'","import { createViewModel } from 'mobx-utils'","import { lazyObservable } from 'mobx-utils'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { makeObservable, observable, action } from 'mobx';\nimport { fromPromise, PromiseState } from 'mobx-utils';\n\ntype User = { id: number; name: string };\n\nclass UserStore {\n  userPromise: PromiseState<User | null> = fromPromise(Promise.resolve(null));\n\n  constructor() {\n    makeObservable(this, {\n      userPromise: observable.ref,\n      fetchUser: action\n    });\n  }\n\n  async fetchUser(id: number) {\n    this.userPromise = fromPromise(\n      new Promise<User>((resolve) => {\n        console.log(`Fetching user ${id}...`);\n        setTimeout(() => {\n          const user = { id, name: `User ${id}` };\n          console.log(`User ${id} fetched.`);\n          resolve(user);\n        }, 1000);\n      })\n    );\n  }\n}\n\nconst store = new UserStore();\nstore.fetchUser(1);\n\n// Observe the promise state\nstore.userPromise.case({\n  pending: () => console.log(\"Loading user...\"),\n  fulfilled: (user) => console.log(`User loaded: ${user?.name}`),\n  rejected: (error) => console.error(`Failed to load user: ${error}`)\n});\n\nsetTimeout(() => {\n  // Re-fetch to see it in action again\n  store.fetchUser(2);\n  store.userPromise.case({\n    pending: () => console.log(\"Loading user 2...\"),\n    fulfilled: (user) => console.log(`User 2 loaded: ${user?.name}`),\n    rejected: (error) => console.error(`Failed to load user 2: ${error}`)\n  });\n}, 2000);","lang":"typescript","description":"Demonstrates `fromPromise` to create an observable wrapper around an asynchronous operation, tracking its pending, fulfilled, and rejected states, and consuming the result reactively.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}