Components

UndoToaster

«Undo» with a draining timer instead of a confirmation dialog.

«Undo» with a visible timer instead of a confirmation dialog. The action happens immediately, and beside it, for a few seconds, an undo appears with a draining ring.

Example

Импорт из Trello
Отчёт по спринту
Черновик релиза
Старый бэклог

Удалите несколько подряд — предложения отмены сольются в одно с счётчиком.

<UndoToaster onUndo={(a) => restore(a.payload)}>
  {({ notify }) => (
    <button onClick={() => {
      remove(item);
      notify({ label: "Deleted", mergeKey: "delete", payload: item });
    }}>Delete</button>
  )}
</UndoToaster>

Props

Prop	Type	Default	Description
`onUndo`*	`(action) => void`	—	What to do when «Undo» is pressed.
`children`*	`(controller) => ReactNode`	—	Gives you notify — called from your action handlers.
`ttlMs`	`number`	`5000`	How long an offer lives by default.
`placement`	`"bottom" \| "bottom-left" \| "bottom-right"`	`"bottom"`	Where to pin it.

onUndo*(action) => void

What to do when «Undo» is pressed.

children*(controller) => ReactNode

Gives you notify — called from your action handlers.

ttlMsnumber

defaults to: 5000

How long an offer lives by default.

placement"bottom" | "bottom-left" | "bottom-right"

defaults to: "bottom"

Where to pin it.

Merging runs

The stack, separately

tsx

import {
  pushUndo,      // push an action (merging runs)
  expireUndo,    // split into the living and the expired
  undoProgress,  // the fraction of life elapsed — for the ring
  undoLabel,     // the caption with the run counter
} from "@toimetdev/pathlogs-core";