Skip to content

<ReactFormUnarchive>

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

jsx
<ReactForm>
  {({ context }) => (
    <ReactFormUnarchive>
      {({ unarchiveItem, isUnarchiving, isReading, isLoading }) => (
        <button onClick={confirmUnarchive(unarchiveItem)} disabled={isLoading}>
          {isUnarchiving ? "Unarchiving..." : "Unarchive"}
        </button>
      )}
    </ReactFormUnarchive>
  )}
</ReactForm>

Render Props

unarchiveItem

  • Type: Function

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

isUnarchiving

  • Type: Boolean

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

jsx
// Default button
<ReactFormUnarchive />

// Custom button with confirmation
<ReactFormUnarchive>
  {({ unarchiveItem, isUnarchiving, isLoading }) => (
    <button
      onClick={() => {
        if (confirm("Are you sure?")) {
          unarchiveItem();
        }
      }}
      disabled={isLoading}
      className="btn btn-success"
    >
      {isUnarchiving ? "Unarchiving..." : "Unarchive"}
    </button>
  )}
</ReactFormUnarchive>

Example

jsx
function confirmUnarchive(unarchiveItem) {
  if (window.confirm("Are you sure you want to unarchive this item?")) {
    unarchiveItem();
  }
}

<ReactForm schema={schema} unarchive={unarchive} itemId={itemId}>
  {({ context }) => (
    <>
      <ReactFormFields>
        {/* Fields */}
      </ReactFormFields>
      
      <ReactFormUnarchive>
        {({ unarchiveItem, isUnarchiving, isLoading }) => (
          <div className="form-actions">
            <button
              onClick={() => confirmUnarchive(unarchiveItem)}
              disabled={isLoading}
              className="btn btn-success"
            >
              {isUnarchiving ? (
                <>
                  <Spinner /> Unarchiving...
                </>
              ) : (
                "Unarchive"
              )}
            </button>
          </div>
        )}
      </ReactFormUnarchive>
    </>
  )}
</ReactForm>

Version 1.0.0