Getting Started

Onomatopoeia as micro-interaction.

Installation

Core (vanilla)

npm install @onomatope/core

React

npm install @onomatope/react

@onomatope/react includes @onomatope/coreas a dependency — no need to install both.

Core (vanilla)

Attach an effect to any element. It handles events, positioning, and cleanup automatically.

import { ClickEffect } from '@onomatope/core'

const cleanup = ClickEffect(button, {
  texts: ['POP!', 'click!'],
  tone: 'pop',
})

// Remove listeners when done
cleanup()

React

Hooks handle refs and cleanup for you. Just pass the returned ref to your element.

import { useClickEffect } from '@onomatope/react'

function LikeButton() {
  const ref = useClickEffect<HTMLButtonElement>({
    texts: ['♡', 'LOVE!'],
    tone: 'pop',
    color: '#e11d48',
  })

  return <button ref={ref}>Like</button>
}

Nextonomatope