ClickEffect/ useClickEffect
Listens for click events and spawns the effect at the click position. The simplest Effect — no action-specific options.
16px
250ms
import { useClickEffect } from '@onomatope/react'
function MyComponent() {
const ref = useClickEffect<HTMLButtonElement>({
texts: ['POP!', 'click!'],
color: '#4a4a4a',
})
return <button ref={ref}>Click</button>
}Options
| Option | Type | Default | Description |
|---|---|---|---|
texts | string[] | ["POP!"] | Text to display (random pick) |
tone | "static" | "pop" | "drift" | "rush" | "drop" | "pop" | Animation style |
color | string | "#666666" | Text color |
size | number | tone default | Font size in px |
duration | number | tone default | Animation duration in ms |