What an agent wants to do, and a button you hold to let it. It says what will happen and whether it can be undone, so nobody approves by accident, then folds into a one line receipt.
The summary is ready. Shall I send it to everyone at the review?
Risk
Approve by
Undo
NeedsReactFramer MotionTheme
Sourcenpm install framer-motion && curl --create-dirs -o src/components/approve.tsx https://fragms.simonveprek.cz/source/approve -o src/components/theme.tsx https://fragms.simonveprek.cz/source/themeSaves src/components/approve.tsx and theme.tsx beside it after installing what it needs. No setup, works in any React project.
import { Approve } from "@/components/approve";<Approve agent="Simmy" action="Email the summary to 12 people" details={["Sends from your address","Attaches summary.pdf","Copies you in"]} undoFor={30} onApprove={run} onDeny={() => tellAgent("No")}/>
actionWhat the agent wants to do, in a few words.
stringDefault requireddetailsWhat will happen, one line each.
string[]Default noneagentWho is asking, shown over the action.
stringDefault noneundoWhether it can be undone, said under the action. Your own words work too.
truefalsestringundoForSeconds the Undo stays in the receipt, with a ring that empties as they pass.
numberDefault no limitriskHigh turns it red and asks for a longer hold.
normalhighholdHow long to hold, in milliseconds. 0 makes it a plain click.
numberDefault 900, or 1600 for highonApproveRuns once approved. Return a promise and it shows as working until it settles, and a failure lets them try again.
() => void | PromiseDefault noneonDenyRuns when they tap the cross.
() => voidDefault noneonUndoOffered in the receipt while it can still be undone.
() => voidDefault nonestatusHolds the state yourself, for an approval that lives on a server.
waitingrunningdonedeniedundoneDefault its owncolorThe button. Left out, the theme's accent, or red for high risk.
CSS colourDefault #3d7bffWhat's new
- 2.0
- First release. Hold to let an agent act
- An Undo that runs out on a small ring