JsonBuilderModal

A full-screen modal that embeds a JsonBuilder editor for constructing or modifying a JSON object. It tracks whether the current state differs from the original data and enables the floating save button only when there are unsaved changes. On save, it calls the configured API endpoint using the specified HTTP method. Errors and success states are communicated via a Toast.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | isOpen | boolean | Yes | — | Controls whether the modal is visible. | | onClose | (reason?: 'success' \| 'cancel' \| 'error' \| 'custom') => void | Yes | — | Called when the modal closes. Receives a reason string. | | title | string | Yes | — | Title displayed in the modal header. | | apiBaseUrl | string | Yes | — | Base URL for the HTTP client. | | savePath | string | Yes | — | API path for saving the JSON data. | | subtitle | string | No | — | Subtitle displayed in the modal header. | | backdropStyle | React.CSSProperties | No | — | Inline styles for the modal backdrop. | | windowStyle | React.CSSProperties | No | — | Inline styles merged into the modal window. | | closeButtonStyle | React.CSSProperties | No | — | Styles for the close button. | | closeIcon | string | No | — | Icon name for the close button. | | closeIconPaths | any[] | No | — | Custom icon paths for the close button. | | closeIconSize | number | No | — | Icon size for the close button. | | zIndex | number | No | 99999 | CSS z-index of the modal overlay. | | id | string | No | — | HTML id for the modal element. | | fullScreen | boolean | No | true | When true, the modal occupies the full viewport. | | useAuthToken | boolean | No | true | When true, uses the authenticated HTTP client. | | saveMethod | 'POST' \| 'PUT' \| 'PATCH' | No | 'POST' | HTTP method used to save the JSON data. | | payloadKey | string | No | — | When set, wraps the JSON data under this key in the request payload. | | data | object \| null | No | — | Initial JSON object loaded into the builder. |

Usage

Basic

import React from 'react';
import JsonBuilderModal from '@/components/modals/JsonBuilderModal';

export default function Example() {
  const [open, setOpen] = React.useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Edit JSON Config</button>
      <JsonBuilderModal
        isOpen={open}
        onClose={(reason) => {
          console.log('Closed:', reason);
          setOpen(false);
        }}
        title="Configuration Editor"
        apiBaseUrl="https://api.example.com"
        savePath="/v1/settings/config"
        saveMethod="PUT"
        payloadKey="config"
        data={{ theme: 'dark', language: 'en' }}
      />
    </>
  );
}