mobx-react-form is now mobx-formkit

DEV Community，DEV 社区最新的首页内容流。关注

The mobx-react-form package — after 273 releases ending with 7.1.0 — is
now published on npm as mobx-formkit. The old package name is marked as
deprecated on the npm registry: anyone installing mobx-react-form today
gets a deprecation notice pointing to mobx-formkit, with no breaking change
for existing installs already pinned to the old name.

The new package is a fresh 1.0.0 release on top of the exact same codebase
(7.1.0 API), under a name that matches what the library actually is:
MobX form state management, not a React-only project. The GitHub repo,
the demo app and the documentation moved along:

Before After
npm install npm i mobx-react-form npm i mobx-formkit
import (CJS / ESM) import MobxReactForm from 'mobx-react-form' import MobxFormkit from 'mobx-formkit'
UMD globals MobxReactForm, MobxReactFormValidator* MobxFormkit, MobxFormkitValidator*
Docs foxhound87.github.io/mobx-react-form foxhound87.github.io/mobx-formkit
Live demo old URL → 404 foxhound87.github.io/mobx-formkit-demo
Repo foxhound87/mobx-react-form foxhound87/mobx-formkit

APIs are identical. The only breaking surface is UMD: bundle filenames and
script-tag globals changed from MobxReactForm* to MobxFormkit* — update
your paths and global references. npm imports and ESM
consumers are unaffected beyond the package name. Old docs URLs under
/mobx-react-form/ now return 404.

Why the rebrand — the library, not the framework

The core of the library depends only on MobX (plus lodash-es) and knows
nothing about React, Vue or any DOM. Form state — values, errors, dirty and
touched flags, validation — lives in observable Form / Field instances,
so any reactive consumer can render it:

  • React (official): mobx-react / mobx-react-lite with observer(); field props map to component props via the bundled Bindings (key rewriters or function-based templates): Material UI, Ant Design, React Aria, Headless UI, React Select, React Widgets, and more.
  • Vue 3: mobx-vue-lite (, Composition API).
  • Lit: @adobe/lit-mobx.
  • Angular: mobx-angular (*mobxAutorun).
  • Solid: mobx-solid (community).
  • Octane: @octanejs/mobx (mobx-react-lite compatible surface).
  • Vanilla JS: plain autorun / reaction — no framework at all.

In other words: the library is UI-agnostic and not opinionated about React.
The package splits into a compact core plus separate subpaths — validators
(mobx-formkit/validators/*, mobx-formkit/lib/validators/*), a composer
for multi-form wizards — plus a dedicated devtools package. Form state lives
in pure MobX; bindings live wherever your UI does.

Validation in 2026

Eight validation drivers share one uniform lifecycle — define fields once,
swap or combine plugins without touching field definitions:

Driver Library Mode Notes
VJF vanilla functions sync + async rules as plain functions
DVR validatorjs sync + async declarative rules string
AJV ajv sync + async JSON Schema
YUP yup sync + async promise-based
JOI joi sync schema objects
ZOD zod sync zod v3.25+ and v4; use zod/v4/core for smaller bundles
VALIBOT valibot sync new in 7.1.0 — no package prop needed, errors per-path incl. nested/array
VINEJS @vinejs/vine async new in 7.1.0 — promise-based, requires a Vine instance + schema

Notable additions of the final 7.1.0 cycle: VALIBOT is zero-config
(valibot({ schema }) — no external package prop) and reports per-field
errors for nested and array paths automatically; VINEJS is async by
design (await form.validate()) and maps error.messages dot-notated paths
onto the right fields. All drivers support the extend callback
({ validator, form }), and both contracts — sync validateSync and async
validate / submit promises — are intact. Core Form / Field methods
(validate, validateSync, clear, reset, $form, ...) are unchanged.

import valibot from 'mobx-formkit/lib/validators/VALIBOT';
import vinejs from 'mobx-formkit/lib/validators/VINEJS';
import vine from '@vinejs/vine';
import * as v from 'valibot';

const plugins = {
  valibot: valibot({ schema: v.object({ email: v.pipe(v.string(), v.email()) }) }),
  vinejs: vinejs({ package: vine, schema: vine.object({ age: vine.number().min(18) }) }),
};

new Form({ fields }, { plugins });

The library ships 1611 unit/integration tests passing, with 95.89% statement
coverage (86.69% branches), built on TypeScript ^5.9.

Migration path

  1. Install: npm i mobx-formkit (keep mobx-react-form around only while you roll out — the old package stays deprecated but functional).
  2. Swap imports: replace every mobx-react-form import and require with mobx-formkit. That's it for npm-based consumers — APIs are identical.
  3. UMD consumers: update bundle filenames and globals from MobxReactForm* to MobxFormkit* (this is the one breaking change).
  4. Bookmark the new docs (old URLs 404) and check the migration guide in the documentation.

DevTools — mobx-react-form-devtools@1.15.0 — keeps its package name but now
supports both peers via a dual resolver (tries mobx-formkit first,
falls back to the legacy mobx-react-form), so it works during and after the
transition.

Resources

添加评论
点赞收藏
点踩分享查看原文
评论
?
参与讨论