DragEffect/ useDragEffect
Full drag lifecycle using PointerEvent for unified mouse/touch/pen support. Supports 3 phases (grab, move, release) with independent options.
Drag me
16px
1000ms
Grab
Release
150ms
import { useDragEffect } from '@onomatope/react'
function MyComponent() {
const ref = useDragEffect<HTMLDivElement>({
texts: ['drag~', 'scrrrr'],
tone: 'drift',
color: '#4a4a4a',
phases: {
grab: { texts: ['GRAB!'], tone: 'pop' },
release: { texts: ['DROP!'], tone: 'drop', size: 20 },
},
})
return <div ref={ref}>...</div>
}Options
| Option | Type | Default | Description |
|---|---|---|---|
texts | string[] | ["POP!"] | Default text for all phases |
tone | Tone | "pop" | Default animation style |
color | string | "#666666" | Default text color |
phases.grab | Options | false | base options | Options for pointerdown (drag start) |
phases.move | Options | false | base options | Options for pointermove (dragging) |
phases.release | Options | false | base options | Options for pointerup (drag end) |
moveThrottle | number | 100 | Minimum ms between move-phase effects |
Notes
- •Uses PointerEvent for unified mouse, touch, and pen support
- •Move/release listeners attach to document for out-of-element dragging
- •Set a phase to false to disable it