Registry / ui-components / react-schema-form

react-schema-form

library1.0.23jsnpmunverified

A React form generator based on JSON Schema that builds forms from schema definitions, ported from Angular Schema Form. Current version 1.0.23 (pre-1.0, likely unstable API). Uses Material-UI components for rendering. Release cadence is low, with gaps of years between updates. Key differentiator: dynamic form generation from JSON schema with live demo capability. Heavily dependent on many peer dependencies (MUI v7, CodeMirror 6, Emotion, React 19). Supports custom field injection via mapper prop. Maintenance status: appears active but versioning suggests early stage.

ui-components forms

npm install react-schema-form

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-SCHEMA-FORM

react-schema-form

ui-componentsjavascriptv1.0.23

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.

SchemaForm

✓ import { SchemaForm } from 'react-schema-form'

✗ import SchemaForm from 'react-schema-form'

Must use named import; there is no default export.

SchemaForm (CommonJS)

✓ const { SchemaForm } = require('react-schema-form')

✗ const SchemaForm = require('react-schema-form')

CommonJS require must destructure; package has no module field but type is commonjs.

SchemaForm (ESM with type: module)

✓ import { SchemaForm } from 'react-schema-form'

✗ import SchemaForm from 'react-schema-form'

Even in ESM context, use named import.

mapper prop type

✓ import { Mapper } from 'react-schema-form' (if exported; check docs)

Mapper type may not be exported; check TypeScript definitions.

Creates a simple form from JSON schema with name and age fields, updates model on change.

import React, { useState } from 'react'; import { SchemaForm } from 'react-schema-form'; const schema = { type: 'object', properties: { name: { type: 'string', title: 'Name' }, age: { type: 'number', title: 'Age' } } }; const form = ['name', 'age', { key: 'age', type: 'number' }]; function App() { const [model, setModel] = useState({}); const handleModelChange = (key, val) => { setModel(prev => ({ ...prev, [key]: val })); }; return ( <SchemaForm schema={schema} form={form} model={model} onModelChange={handleModelChange} /> ); } export default App;

Debug

Known issues

gotchaPackage version is 1.0.23 but appears pre-1.0; API may change without major semver bump.

fix

Pin exact version or carefully test upgrades.

affects: >=1.0.0

breakingRequires React 19 and MUI v7 (as per peerDependencies). Breaking changes from React 18 and MUI v5.

fix

Ensure your project uses React 19+ and @mui/material ^7.3.6.

affects: >=1.0.0

gotchaHeavy peer dependency set; installing may pull many packages that conflict with existing project dependencies.

fix

Review peerDependencies before install; consider using npm install --legacy-peer-deps if conflicts arise.

affects: >=1.0.0

deprecatedPackage uses require('react-schema-form') but might transition to ESM; CommonJS may break in future.

fix

Use named import for both CommonJS and ESM; watch for module type changes.

affects: >=1.0.0

gotchaForm format follows json-schema-form standard but documentation is external and may be incomplete.

fix

Refer to https://github.com/json-schema-form/json-schema-form/wiki/Documentation for format details.

affects: >=1.0.0

Errors

Common errors & fixes

Module not found: Can't resolve 'react-schema-form'

Package not installed or missing dependency.

fix

Run: npm install react-schema-form --save

Attempted import error: 'SchemaForm' is not exported from 'react-schema-form'

Using default import instead of named import.

fix

Change import to: import { SchemaForm } from 'react-schema-form'

Uncaught TypeError: Cannot read properties of undefined (reading 'schema')

Schema property not passed to SchemaForm.

fix

Ensure you pass a valid schema object: <SchemaForm schema={mySchema} ... />

Warning: React does not recognize the `onModelChange` prop on a DOM element.

Prop is passed to a native HTML element; likely incorrect component usage.

fix

Ensure you use the SchemaForm component correctly and not a wrapper that spreads props.

Upgrade

Version history

1.0.23latest on npm

Audit

Dependencies

@babel/runtimerequiredUsed for transpiled runtime helpers

@codemirror/autocompleteoptionalCode editor autocomplete for schema/form editing

@mui/materialrequiredMaterial-UI core components for form fields

@mui/icons-materialoptionalIcons used in form UI

reactrequiredPeer dependency for React 19

react-domrequiredPeer dependency for React 19

Agent activity

36 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/networknt/react-schema-form ↗

packagereact-schema-form ↗

homepagehttps://github.com/networknt/react-schema-form#readme ↗