<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>