onomatope()

The core function. All Effects use this internally.

Overloads

Pass coordinates, an element, or an event.

import onomatope from '@onomatope/core'

// At coordinates
onomatope({ x: 200, y: 300 }, { texts: ['POP!'] })

// At element center
onomatope(button, { texts: ['POP!'] })

// From mouse/touch event
onomatope(event, { texts: ['POP!'] })

Options

onomatope(element, {
  texts: ['POP!', 'clack', 'tap'],  // Random pick
  tone: 'pop',                       // static | pop | drift | rush | drop
  color: '#666',                     // Text color
  size: 16,                          // Font size in px
})
OptionTypeDefault
textsstring[]["POP!"]
tone"static" | "pop" | "drift" | "rush" | "drop""pop"
colorstring"#666666"
sizenumbertone default
durationnumbertone default
fontFamilystringtone default

React

Use useOnomatope()for custom triggers where the built-in hooks don't fit.

import { useOnomatope } from '@onomatope/react'

function MyComponent() {
  const spawn = useOnomatope()

  return (
    <button onClick={(e) => spawn(e.nativeEvent, { texts: ['BOOM!'] })}>
      Fire!
    </button>
  )
}

Tones

A tone is a preset that controls animation, typography, and timing all at once. Click each to compare.

PreviousGetting Started
NextClickEffect