Smoke Test

Quick sanity check to verify intent-click works in your project.

1. Create a Vite project

npm create vite@latest test-intent-click -- --template react-ts
cd test-intent-click
npm install
npm install intent-click

2. Add test component

// src/App.tsx
import { useState } from 'react';
import { useIntentClick } from 'intent-click/react';

function App() {
    const [clickCount, setClickCount] = useState(0);
    const [cancelReason, setCancelReason] = useState<string | null>(null);

    const handleClick = (event: PointerEvent) => {
        setClickCount((c) => c + 1);
        setCancelReason(null);
        console.log('Intent click!', event.clientX, event.clientY);
    };

    const ref = useIntentClick<HTMLButtonElement>(handleClick, {
        threshold: 'auto',
        longPressDelay: 500,
        onLongPress: () => {
            console.log('Long press!');
            setCancelReason('long-press');
        },
        onIntentCancel: (reason) => {
            setCancelReason(reason);
            console.log('Cancelled:', reason);
        },
    });

    return (
        <div style={{ padding: '2rem' }}>
            <h1>intent-click Smoke Test</h1>
            <button
                ref={ref}
                style={{
                    padding: '1rem 2rem',
                    fontSize: '1.5rem',
                    background: '#007bff',
                    color: 'white',
                    border: 'none',
                    borderRadius: '8px',
                }}
            >
                Click Me
            </button>
            <p>Intent clicks: {clickCount}</p>
            {cancelReason && <p style={{ color: 'red' }}>Last cancel: {cancelReason}</p>}
            <p style={{ color: '#666' }}>
                Try: scroll-drag over button, long press, multi-touch
            </p>
        </div>
    );
}

export default App;

3. Run

npm run dev

4. Verify

1. Normal click: Counter increments
2. Drag while clicking: Cancelled with "drag"
3. Scroll over button: Cancelled with "scroll"
4. Long press (>500ms): "long-press" message
5. Multi-touch: Cancelled with "concurrent-pointer"

5. Check bundle size

npm run build
npx vite-bundle-visualizer

Verify intent-click is < 1KB gzip.