CODEWITHSUNDEEP
reactjsreact-jsonschema-forms
Tomas Krcal
Tomas Krcal

Reputation: 63

How to use react-jsonschema-form in react?

i have an issue with building forms in react with json. I've installed react-jsonschema-form but I just can't get it to work. I have the package installed locally, I am using TypeScript and I'm using nx/nrwl. This is what I've tried.

import React from 'react';
import './form.scss';

const Form = JSONSchemaForm.default;
const schema = {
    type: "string"
};

/* eslint-disable-next-line */
export interface FormProps {
    json: any;
}


export const FormComponent = (props: FormProps) => {
        return (
            <>
                <Form schema={schema}/>
            </>
        );
    }
;

export default FormComponent;

The question is where do i get the JSONSchemaForm variable from?

For example, this little snippet works like a charm https://codepen.io/krcaltomas99/pen/abvaJdb

Thanks for your advice!

Upvotes: 4

Views: 2763

Answers (2)

ggorlen
ggorlen

Reputation: 56925

The existing answer is correct in pointing out that the CDN script has somewhat different workflow, but I was confused because import Form from "@rjsf/core"; didn't work for me on react-jsonschema-form 1.7.0:

Module not found: Error: Can't resolve '@rjsf/core'

It turns out there are two different packages. The older package (last updated in 2019 at the time of writing) react-jsonschema-form worked for me with the following boilerplate:

import JSONSchemaForm from "react-jsonschema-form"; // 1.7.0
import React from "react"; // 17.0.2

const formSchema = {
  type: "object",
  properties: {
    name: {
      name: "Name",
      type: "string",
      pattern: "^[a-zA-Z]+$",
      minLength: 10,
      maxLength: 50,
    },
  },
  required: ["name"],
};

const App = () => (
  <JSONSchemaForm
    onSubmit={f => console.log(f)}
    schema={formSchema}
  />
);

export default App;

And here's a complete example of the newer package, @rjsf/core 4.2.2:

import Form from "@rjsf/core"; // 4.2.2
import React from "react"; // 17.0.2

const formSchema = {
  type: "object",
  properties: {
    name: {
      name: "Name",
      type: "string",
      pattern: "^[a-zA-Z]+$",
      minLength: 10,
      maxLength: 50,
    },
  },
  required: ["name"],
};

const App = () => (
  <Form
     onSubmit={f => console.log(f)}
     schema={formSchema}
  />
);

export default App;

For completeness, here's a CDN version as a stack snippet:

const Form = JSONSchemaForm.default;
// or const {default: Form} = JSONSchemaForm;

const schema = {
  title: "Todo",
  type: "object",
  required: ["title"],
  properties: {
    title: {type: "string", title: "Title", default: "A new task"},
    done: {type: "boolean", title: "Done?", default: false}
  }
};

const log = (type) => console.log.bind(console, type);

ReactDOM.createRoot(document.querySelector("#app"))
  .render(
    <Form schema={schema}
        onChange={log("changed")}
        onSubmit={log("submitted")}
        onError={log("errors")} />
  );
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@rjsf/[email protected]/dist/react-jsonschema-form.js"></script>
<div id="app"></div>

Upvotes: 0

mirage
mirage

Reputation: 708

The JSONSchemaForm is the name of the export that is loaded into your web app if you use the CDN script import method.

Since you said you installed the package, you can justuse the import syntax (i.e. import Form from "@rjsf/core";) and let your bundler take care handling the library dependency rather than modify your index.html to include the CDN script.

Upvotes: 8

Related Questions