@onomatope/react

React hooks for onomatope — visible sound effects as micro-interaction.

Install

npm install @onomatope/react

Requires React 19+.

Usage

import { useClickEffect } from '@onomatope/react'

function Button() {
  const ref = useClickEffect({ texts: ['POW'] })
  return <button ref={ref}>Click me</button>
}

Hooks

| Hook | Trigger | |------|---------| | useClickEffect | Click / tap | | useHoverEffect | Mouse enter | | useKeydownEffect | Keyboard input | | useDragEffect | Drag movement | | useOnomatope | Manual spawn |

All hooks return a callback ref. Pass options like { texts, tone, color, size }.

License

MIT