@everymundo/registry-json-schema-form

A simple React component capable of using JSON Schema to declaratively build and customize web forms for Registry

Installation

npm i react @rjsf/core @mantine/core @mantine/hooks @monaco-editor/react

• @monaco-editor/react is optional, only if format="json"

Demo

https://everymundo.github.io/registry-json-schema-form/

Concept

This component is based on three fundamental elements:

• It's a wrapper for the react-jsonschema-form v4 dependency
• A custom specialized theme based on Mantine v6 is used.
• Recognizes specific attributes of Registry Json Schema settings and implements rules and UI components to respond to them.

It is used practically the same as you would use react-jsonschema-form v4 (refer to the official documentation for more information)

Some important code snippets to highlight:

• Here the schemas are converted from the Registry specification to the standard one, returning a standard schema and uiSchema. https://github.com/EveryMundo/registry-json-schema-form/blob/c54200a71438ecf6117f33929f4fe5f3e1328920/src/core/Form.js#L30-L39

• Here an invocation is made to withTheme to import the custom Mantine-based theme that this component uses. https://github.com/EveryMundo/registry-json-schema-form/blob/c54200a71438ecf6117f33929f4fe5f3e1328920/src/framework/mantine/components/Form/Form.js#L9-L27

Pending migration:

It is important to migrate from react-jsonschema-form** v4 to v5 and from Mantine v6 to v7.