nope-click 🧊

> Zero-config, lightweight drop-in “intent press” utility.
> Automatically fire “click-like” handlers only when the user actually meant it (not on scroll releases, drags, text selection, or ghost clicks).

Why? 🤔

You want tappable cards and list items to feel solid, but you don't want to:
- ❌ Trigger navigation after a scroll release (“oops click”).
- ❌ Open things while selecting text.
- ❌ Maintain a spaghetti mess of isDragging flags and timeouts.
- ❌ Fight ghost clicks / pointercancel edge cases across browsers.

nope-click is the solution. It wraps pointer interactions into a small “intent transaction” and only commits when the interaction stays intentional.

- Universal: Works with React, Vue, Svelte, Solid, Angular, and Vanilla JS.
- Tiny: Tree-shakeable, no runtime deps.
- Performant: Passive listeners, scoped listeners via AbortController, minimal work per event.

---

Installation 📦

``bash
npm install nope-click

or

yarn add nope-click

or

pnpm add nope-click
`

Usage 🚀

$3

Use the useIntentPress hook.

`jsx
import { useState } from 'react'
import { useIntentPress } from 'nope-click/react'

const MyCard = () => {
const [count, setCount] = useState(0)
const press = useIntentPress(() => setCount((c) => c + 1))

return (
<>

onPointerDown={press.onPointerDown}
onClickCapture={press.onClickCapture}
style={{ padding: 12, border: '1px solid #ddd' }}
>
Intent presses: {count}

Try scrolling on touch, dragging, or selecting text.

)
}
}
`

$3

Use the v-intent-press directive.

`html




`

$3

Use the intentPress action.

`svelte

(count += 1), options: { clickGuard: true } }}>
Intent presses: {count}

`

$3

Use the intentPress directive.

Note for TypeScript users: You need to extend the JSX namespace to avoid type errors with use:.

`tsx
import { createSignal } from 'solid-js'
import { intentPress } from 'nope-click/solid'

// ⚠️ TypeScript only: Add this declaration to fix "Property 'use:intentPress' does not exist"
declare module "solid-js" {
namespace JSX {
interface Directives {
intentPress: boolean | { onIntent: (ev: any) => void; options?: object }
}
}
}

function App() {
const [count, setCount] = createSignal(0)

return (

setCount((c) => c + 1) }}>
Intent presses: {count()}

)
}
}
`

$3

Use the standalone IntentPressDirective.

`typescript
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IntentPressDirective } from 'nope-click/angular';

@Component({
selector: 'app-card',
standalone: true,
imports: [CommonModule, IntentPressDirective],
template:


})
export class CardComponent {
count = 0;
onIntent = () => { this.count++; };
}

`

$3

`js
import { createIntentPress } from 'nope-click/core'

const el = document.getElementById('card')

// Enable intent presses
const press = createIntentPress(() => {
console.log('intent!')
})

el.addEventListener('pointerdown', press.onPointerDown, { passive: true })
el.addEventListener('click', press.onClickCapture, { capture: true })

// Later, if you want to stop:
// press.destroy()
`

---

Configuration ⚙️

You can customize the duration and easing function.

`js
/// React
useIntentPress(onIntent, { slop: 10, clickGuard: true })

// Vue