Hold to delete button for React

Press and hold, the file crumples into the bin, and Undo stays for a few seconds.

Get the code · $3React · Tailwind · TypeScript
Hold to Delete, preview

Use it in Next.js

"use client";
import { HoldToDelete } from "@/components/HoldToDelete";

export default function File() {
  return <HoldToDelete fileName="report.pdf" holdMs={1200} onCommit={() => deleteFile()} onUndo={() => restore()} />;
}

Install

  1. Copy from the zipPut react/src/components into src/, then npm i framer-motion.
  2. Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

holdMs
how long to hold
onCommit
undo window ran out, delete for real
onUndo
undo pressed
undoMs
how long Undo stays

Questions

Does the button work in Next.js?

Yes, as a client component. Keep "use client" at the top of the file that renders it, as in the snippet above. App Router and Pages Router both work.

Does it work on touch screens?

Yes. It uses pointer events, and releasing early cancels.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.