# react-jsonschema-form-builder

> 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

Latest version **1.1.8** (published 2021-12-21) · MIT license · 20 weekly downloads

## Install

```sh
npm install react-jsonschema-form-builder
pnpm add react-jsonschema-form-builder
yarn add react-jsonschema-form-builder
bun add react-jsonschema-form-builder
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.8 |
| Published | 2021-12-21 |
| First published | 2020-09-18 |
| Weekly downloads | 20 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 10 |
| Unpacked size | 30.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 54 |
| Author | Sebastian Medina |
| Maintainers | antonelistick |

## Links

- npm: https://www.npmjs.com/package/react-jsonschema-form-builder
- Repository: https://github.com/MedinaGitHub/react-jsonschema-form-builder
- Homepage: https://github.com/MedinaGitHub/react-jsonschema-form-builder#readme
- Issues: https://github.com/MedinaGitHub/react-jsonschema-form-builder/issues
- npm.io page: https://npm.io/package/react-jsonschema-form-builder

## Dependencies (10)

- [react](https://npm.io/package/react.md) ^16.13.1
- [react-dom](https://npm.io/package/react-dom.md) ^16.13.1
- [@rjsf/core](https://npm.io/package/@rjsf/core.md) ^2.4.0
- [react-scripts](https://npm.io/package/react-scripts.md) 3.4.3
- [@material-ui/core](https://npm.io/package/@material-ui/core.md) ^4.11.0
- [@rjsf/material-ui](https://npm.io/package/@rjsf/material-ui.md) ^2.4.0
- [@material-ui/icons](https://npm.io/package/@material-ui/icons.md) ^4.9.1
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^9.5.0
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^4.2.4
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^7.2.1

## Recent versions

- 1.1.8 (latest) — 2021-12-21
- 1.1.7 — 2021-12-21
- 1.1.6 — 2021-12-21
- 1.1.5 — 2021-12-01
- 1.1.4 — 2021-11-30
- 1.1.3 — 2021-11-30
- 1.1.2 — 2021-11-17
- 1.1.1 — 2021-06-11
- 1.0.10 — 2021-04-29
- 1.0.9 — 2020-11-03
- 1.0.8 — 2020-11-03
- 1.0.7 — 2020-11-02
- 1.0.6 — 2020-11-02
- 1.0.5 — 2020-10-24
- 1.0.4 — 2020-10-23
- … 4 more at https://npm.io/package/react-jsonschema-form-builder/versions

## README

![Build Status](https://github.com/MedinaGitHub/react-jsonschema-form-builder/workflows/React%20CI/CD/badge.svg)


This project was bootstrapped with [Create React App](https://github.com/facebook/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](https://github.com/rjsf-team/react-jsonschema-form) 

## Why?

 Because I needed to create forms visually to export them to another system with react-jsonschema-form syntax

# Demo

[Demo](https://codesandbox.io/s/silent-wood-jihjk?file=/src/index.js:293-323)

## 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](https://github.com/rjsf-team/react-jsonschema-form#documentation)

## Implementation

```js

    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
```js
        {
            "title": "Form Title",
            "description": "Subtitle",
            "type": "object",
            "properties": {}
        }
```

other properties

```js
    //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={{}}
    />
```

![imagen](https://i.imgur.com/Pt0P07u.png)

---
_Source: https://npm.io/package/react-jsonschema-form-builder · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._