# Hold to confirm

A button that acts only after a full press. Let go early and nothing happens.

Package: @reuse-sh/interactions

## Principles

These are the rules to keep when you adapt this library. The code is one way to keep them. An adaptation on any framework must keep every one.

- Confirm once per hold. A completed hold calls onConfirm exactly once, and the next action needs a new press.

- Cancel on any doubt. Letting go early, leaving the button, blur, Escape or disabling the button cancels the hold.

- Accept pointer and keys. A pointer, Space or Enter can hold, and keyboard auto-repeat never starts a new hold.

- Let assistive technology click. A click without a physical press, as from a screen reader, confirms at once.

- Own the gesture, not the action. Your code owns the request, the loading state, success and failure.

- Keep the native button. It enhances a button you already have and restores its markup on destroy.

## Install

```bash
npm install @reuse-sh/interactions
```

## Integration notes

- The controller owns the gesture. Your code owns the request, the loading state, success and failure.

- A click from assistive technology confirms without a physical hold.

- Leaving the button, a cancelled pointer, blur, Escape and destroy all cancel a hold in progress.

## API

- `createHoldToConfirm(button, { onConfirm, holdMs? })`: Turns a button into a hold. onConfirm runs once the hold completes. holdMs is 1200 by default.

- `cancel(), destroy()`: Stops a hold in progress, or removes the hold and restores the button.

- `data-holding, reuse-hold-fill`: The attribute set on the button while it is held, and the fill element that grows across it.

- `HoldToConfirmButton`: The React button around the same controller. It takes onConfirm and holdMs.

## Browser JavaScript

```js
import { createHoldToConfirm } from "@reuse-sh/interactions";
import "@reuse-sh/interactions/styles.css";

const hold = createHoldToConfirm(button, {
  holdMs: 1200,
  onConfirm: () => removeDraft(),
});
```

## React

```tsx
import { HoldToConfirmButton } from "@reuse-sh/interactions/react";
import "@reuse-sh/interactions/styles.css";

<HoldToConfirmButton holdMs={1200} onConfirm={removeDraft}>
  Hold to remove
</HoldToConfirmButton>
```

## Agent workflow

1. Inspect the project and read the installed package's types and stylesheet.

2. Reuse the native controller. Use the React adapter only in a React surface.

3. Adapt styles and data connections to the project. Keep every principle above. Do not recreate the gesture or state engine.

4. Connect destroy and unsubscribe callbacks to the owner lifecycle.

5. Verify keyboard access, pointer/touch behavior, resize, empty/one-item states, errors, reduced motion, and teardown where applicable.

6. Report the actual checks and remaining browser/device limits.

## Source

https://github.com/reuse-sh/reuse/tree/main/packages/interactions/src

License: MIT for original library code. Preserve dependency and asset license notices.