react-json-form-builder

A JSON-driven React form builder with built-in field types, theming, and a drag-and-drop file field.

Install

npm i react-json-form-builder

Usage

import React from "react";
import { FormBuilder } from "react-json-form-builder";
import "react-json-form-builder/style.css";

const schema = {
  fields: [
    { id: "name", type: "text", name: "fullName", label: "Full name", required: true },
    { id: "bio", type: "textarea", name: "bio", label: "Bio" },
    { id: "terms", type: "checkbox", name: "acceptTerms", label: "Accept terms", required: true },
    { id: "news", type: "switch", name: "newsletter", label: "Newsletter" },
    {
      id: "files",
      type: "dragdrop",
      name: "attachments",
      label: "Attachments",
      accept: "image/*,.pdf",
      hint: "Drop a file here, or click to browse",
    },
  ],
} as const;

export function Example() {
  return (
    <FormBuilder
      schema={schema}
      submitLabel="Send"
      loadingLabel="Sending…"
      onSubmit={(values) => {
        console.log(values);
      }}
    />
  );
}

Loading state

Use the loading prop to disable fields and show a loading submit button.

<FormBuilder loading={true} />

Drag-drop icon customization

You can customize the drag-drop icon in multiple ways:

• Provide a React node:

<FormBuilder
  styles={{
    dragdrop: {
      dropzoneIcon: <span style={{ fontSize: 18 }}>↑</span>,
    },
  }}
/>

• Provide an image URL (JSON-friendly):

const schema = {
  fields: [
    {
      id: "files",
      type: "dragdrop",
      name: "attachments",
      label: "Attachments",
      dropzoneIconSrc: "/icons/upload.svg",
      dropzoneIconAlt: "",
    },
  ],
};

Styling

Import the base stylesheet:

import "react-json-form-builder/style.css";

Then customize via styles + theme tokens.

License

MIT