<ReactFormDelete>

Renders a delete button that calls the delete method on click. The button is automatically visible only in update mode.

<ReactForm>
  {({ context }) => (
    <ReactFormDelete>
      {({ deleteItem, isDeleting, isReading, isLoading }) => (
        <button onClick={confirmDelete(deleteItem)} disabled={isLoading}>
          {isDeleting ? "Deleting..." : "Delete"}
        </button>
      )}
    </ReactFormDelete>
  )}
</ReactForm>

Render Props

deleteItem

• Type: Function

Wrapper function for calling the delete method. Call this function when the button is clicked.

isDeleting

• Type: Boolean

true while the delete operation is in progress.

isReading

• Type: Boolean

true while the read operation is in progress (when loading existing data).

isLoading

• Type: Boolean

true when any async operation is in progress (reading, creating, updating, deleting, or archiving).

Default Behavior

If no render prop is provided, <ReactFormDelete> renders a default button with loading states.

// Default button
<ReactFormDelete />

// Custom button with confirmation
<ReactFormDelete>
  {({ deleteItem, isDeleting, isLoading }) => (
    <button
      onClick={() => {
        if (confirm("Are you sure?")) {
          deleteItem();
        }
      }}
      disabled={isLoading}
      className="btn btn-danger"
    >
      {isDeleting ? "Deleting..." : "Delete"}
    </button>
  )}
</ReactFormDelete>

Example

function confirmDelete(deleteItem) {
  if (window.confirm("Are you sure you want to delete this item?")) {
    deleteItem();
  }
}

<ReactForm schema={schema} delete={deleteItem} itemId={itemId}>
  {({ context }) => (
    <>
      <ReactFormFields>
        {/* Fields */}
      </ReactFormFields>
      
      <ReactFormDelete>
        {({ deleteItem, isDeleting, isLoading }) => (
          <div className="form-actions">
            <button
              onClick={() => confirmDelete(deleteItem)}
              disabled={isLoading}
              className="btn btn-danger"
            >
              {isDeleting ? (
                <>
                  <Spinner /> Deleting...
                </>
              ) : (
                "Delete"
              )}
            </button>
          </div>
        )}
      </ReactFormDelete>
    </>
  )}
</ReactForm>