mobx-schema-form

library1.14.2jsnpmunverified

MobX Schema Form is a React component library (v1.14.2) that bridges MobX FormStore with React-Schema-Form and React-Toolbox for declarative form rendering, validation, and Material Design widgets. It provides reactive, conditionally-rendered fields, real-time validation, and support for custom validators. Compared to alternatives like react-jsonschema-form, it offers lighter weight (CSS Modules over inline styles) and tighter MobX integration, including computed properties and conditional required/read-only fields. Maintenance pace is low; last release was in 2019. Requires React 15/16, MobX 2.2–5, and React-Toolbox 1–3.

testing

npm install mobx-schema-form

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · MOBX-SCHEMA-FORM

mobx-schema-form

testingjavascriptv1.14.2

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

MobxSchemaForm

✓ import MobxSchemaForm from 'mobx-schema-form'

✗ const MobxSchemaForm = require('mobx-schema-form')

Default export; ESM/CJS compatible. Use default import.

schemaFormPropTypes

✓ import { schemaFormPropTypes } from 'mobx-schema-form'

✗ import schemaFormPropTypes from 'mobx-schema-form'

Named export for prop type validation.

modelShape

✓ import { modelShape } from 'mobx-schema-form'

✗ const modelShape = require('mobx-schema-form').modelShape

Named export defining expected model structure.

Demonstrates minimal form rendering using MobxSchemaForm with a MobX FormStore model and a simple schema.

import React from 'react'; import { render } from 'react-dom'; import MobxSchemaForm from 'mobx-schema-form'; import { observable, action } from 'mobx'; import FormStore from 'mobx-form-store'; import 'react-toolbox/lib/commons.css'; class MyModel extends FormStore { @observable name = ''; @observable email = ''; @action setName(value) { this.name = value; } @action setEmail(value) { this.email = value; } } const schema = { type: 'object', properties: { name: { type: 'string', title: 'Name', minLength: 2 }, email: { type: 'string', title: 'Email', format: 'email' } } }; const form = [ { key: 'name', type: 'text' }, { key: 'email', type: 'text' } ]; const model = new MyModel(); const App = () => ( <MobxSchemaForm schema={schema} form={form} model={model} /> ); render(<App />, document.getElementById('root'));

Debug

Known issues

deprecatedPackage is in maintenance mode; no active development since 2019.

fix

Consider migrating to React JSON Schema Form or react-jsonschema-form with MobX adapter.

affects: all

breakingVersion 1.14.x may break with React >16 due to lifecycle changes or React-Toolbox v3 changes.

fix

Pin React to 15 or 16 and React-Toolbox to matching version. Use 1.9.x for older React.

affects: >=1.14.0

gotchaBabel polyfill is required for older browsers; not automatically included.

fix

Install and import babel-polyfill at app entry point.

affects: all

breakingMobX version compatibility is wide but not all combinations tested. MobX 5 may cause issues with form-store.

fix

Test with specific MobX version; prefer MobX 4 for stability.

affects: >=1.10.0

gotchalodash.template peer dependency is required even if not directly used internally.

fix

Install lodash.template as dependency.

affects: all

Errors

Common errors & fixes

Module not found: Can't resolve 'babel-polyfill'

Missing peer dependency babel-polyfill not installed.

fix

npm install babel-polyfill

Cannot find module 'lodash.template'

Missing peer dependency lodash.template.

fix

npm install lodash.template

TypeError: Cannot read property 'render' of undefined

React-Toolbox version mismatch or missing CSS imports.

fix

Install correct react-toolbox version (e.g., 1.3.x) and import react-toolbox/lib/commons.css.

Uncaught TypeError: Cannot convert undefined or null to object

Model not passed or not a FormStore instance.

fix

Ensure model prop is an instance of MobX FormStore or matches modelShape.

Upgrade

Version history

1.14.2latest on npm

Audit

Dependencies

babel-polyfilloptionalRequired for runtime polyfills; peer dependency

lodash.templateoptionalUsed for template processing; peer dependency

mobxrequiredState management core; version 2.2+ required

mobx-form-storerequiredProvides model shape for forms; peer dependency

mobx-reactrequiredReact bindings for MobX; peer dependency

reactrequiredUI library; peer dependency

react-toolboxrequiredMaterial Design widget library; peer dependency

Agent activity

3 hits · last 30 days

node

Amazon

Resources

githubhttps://github.com/alexhisen/mobx-schema-form ↗

packagemobx-schema-form ↗

homepagehttps://github.com/alexhisen/mobx-schema-form ↗