react-jsonschema-form-builder v1.1.8
This project was bootstrapped with Create React App.
It's a visual builder of "Json Schema" that export the "Json Schema" generated for then paste this structure of schema in your react-jsonschema-form component
Why?
Because I needed to create forms visually to export them to another system with react-jsonschema-form syntax
Demo
How does it work?
Very easy, if you know how does react-jsonschema-form work, you will feel comfortable with the code.
Installation
$ npm install react-jsonschema-form-builder
How does the design change?
You can do a fork and change this package @rjsf/material-ui For watching another available options you can read Supported Themes
Implementation
import React from 'react';
import seed from './seed.json'
import FormBuilderSchema from "react-jsonschema-form-builder";
function App() {
return (
<>
<FormBuilderSchema
rootSchema={seed}
/>
</>
);
}
export default App;
seed.json
{
"title": "Form Title",
"description": "Subtitle",
"type": "object",
"properties": {}
}
other properties
//getJsonSchemaForm => callback this json schema
//prefix => if you can add prefix before ID of inprus
//rootSchemaUi => UiSchema
//customWidgets => you can import some custom Widget
//newFields=> You can edit the form of add a new field
//newPropJsonSchema=> if you add a new item in a custom newFields.json, thi function recibe de //options of you new field, and you can join with a customWidgets
//modalSchemaUi => UiSchema for the open modal configuration
<FormBuilderSchem
getJsonSchemaForm={getJsonSchema}
rootSchema={seed}
rootSchemaUi={{}}
newFields={jsonSchema}
prefix={'prefix_befores_ides_inputs'}
newPropJsonSchema={(newProp,formData, prefix)=>{return newProp}}
customWidgets={{CustomCheckbox, FileWidget, ...}}
modalSchemaUi={{}}
/>
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago