Undo action

TS

import { … } from "@fungi.computer/caps/components/undo-action";

Hero

TSX

import { UndoAction } from "@fungi.computer/caps/components/undo-action";

export default function Hero() {
  return (
    <UndoAction
      armedAnnouncement="Listing removed in 5 seconds"
      onCommit={() => {
        /* This specimen has no host action. */
      }}
      undoneAnnouncement="Listing kept"
      variant="ghost-destructive"
    >
      Remove listing
    </UndoAction>
  );
}

Interactive

TSX

import { useState } from "react";
import { UndoAction } from "@fungi.computer/caps/components/undo-action";

export default function Interactive() {
  const [status, setStatus] = useState("Port 5173 is open");
  return (
    <div className="flex flex-col items-start gap-2">
      <UndoAction
        armedAnnouncement="Port 5173 stops in 5 seconds"
        onCommit={() => {
          setStatus("Port 5173 stopped");
        }}
        undoMs={3000}
        undoneAnnouncement="Port 5173 kept open"
        variant="outline"
      >
        Stop port 5173
      </UndoAction>
      <p className="text-sm text-base-content">{status}</p>
    </div>
  );
}

Props

UndoActionProps

Prop	Type	Description
children	ReactNode	The action's label, such as "Stop".
onCommit()	() => void	Runs when the undo window closes without an undo: the action happens then.
armedAnnouncement	string	Spoken when the action is armed, such as "Port 5173 stops in 5 seconds".
undoneAnnouncement	string	Spoken after an undo, such as "Port 5173 kept open".
undoLabel?	ReactNode
undoMs?	number	The undo window in milliseconds.

• childrenReactNode

  The action's label, such as "Stop".

• onCommit()() => void

  Runs when the undo window closes without an undo: the action happens then.

• armedAnnouncementstring

  Spoken when the action is armed, such as "Port 5173 stops in 5 seconds".

• undoneAnnouncementstring

  Spoken after an undo, such as "Port 5173 kept open".

• undoLabel?ReactNode
• undoMs?number

  The undo window in milliseconds.

Full types: API reference.