<ReactFormArchive>

Renders an archive button that calls the archive method on click. The button is automatically visible only in update mode and when the item is not archived.

<ReactForm>
  {({ context }) => (
    <ReactFormArchive>
      {({ archiveItem, isArchiving, isReading, isLoading }) => (
        <button onClick={confirmArchive(archiveItem)} disabled={isLoading}>
          {isArchiving ? "Archiving..." : "Archive"}
        </button>
      )}
    </ReactFormArchive>
  )}
</ReactForm>

Render Props

archiveItem

• Type: Function

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

isArchiving

• Type: Boolean

true while the archive 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, <ReactFormArchive> renders a default button with loading states.

// Default button
<ReactFormArchive />

// Custom button with confirmation
<ReactFormArchive>
  {({ archiveItem, isArchiving, isLoading }) => (
    <button
      onClick={() => {
        if (confirm("Are you sure?")) {
          archiveItem();
        }
      }}
      disabled={isLoading}
      className="btn btn-warning"
    >
      {isArchiving ? "Archiving..." : "Archive"}
    </button>
  )}
</ReactFormArchive>

Example

function confirmArchive(archiveItem) {
  if (window.confirm("Are you sure you want to archive this item?")) {
    archiveItem();
  }
}

<ReactForm schema={schema} archive={archive} itemId={itemId}>
  {({ context }) => (
    <>
      <ReactFormFields>
        {/* Fields */}
      </ReactFormFields>
      
      <ReactFormArchive>
        {({ archiveItem, isArchiving, isLoading }) => (
          <div className="form-actions">
            <button
              onClick={() => confirmArchive(archiveItem)}
              disabled={isLoading}
              className="btn btn-warning"
            >
              {isArchiving ? (
                <>
                  <Spinner /> Archiving...
                </>
              ) : (
                "Archive"
              )}
            </button>
          </div>
        )}
      </ReactFormArchive>
    </>
  )}
</ReactForm>