interactkit

A tiny React wrapper component that adds sound effects to hover, click, and other UI interactions — no audio setup, no manual <audio> tags, no asset management. Wrap anything, pick a sound, done.

Comes with 168 built-in sound effects across 11 categories, loaded lazily so your bundle only pays for the sounds you actually use. You can also play any external audio file by URL instead of (or alongside) the built-in library.

Why interactkit?

Adding sound feedback to a UI usually means manually managing <audio> elements, wiring up event handlers, and hunting for sound files. interactkit collapses all of that into one wrapper component:

<Interactive hover={{ sound: "laser-08" }}>
  <button>Click me</button>
</Interactive>

That's the whole API for the common case.

Installation

npm install interactkit
# or
pnpm add interactkit
# or
yarn add interactkit

Requires React 18 or later.

Quick start

import { Interactive } from "interactkit";

function App() {
  return (
    <Interactive
      hover={{ sound: "bubble-pop-01", volume: 0.6 }}
      click={{ sound: "success-03", volume: 0.9 }}
    >
      <button>Save</button>
    </Interactive>
  );
}

• hover — plays when the wrapped element receives onMouseEnter
• click — plays when the wrapped element receives onClick
• volume — optional, 0 to 1 (default 1)

Your own onClick/onMouseEnter/onMouseLeave handlers on the child element still run as normal — interactkit doesn't replace them, it plays the sound alongside them.

interactkit also works on custom components, not just plain HTML tags. Whether you wrap a <button> or your own <Button01 /> component, the sound will play the same way — no extra setup required on the wrapped component's end.

Browser note: browsers block audio from playing until the user has interacted with the page at least once (a click, tap, or keypress — hover alone doesn't count). This is standard browser policy on every site with sound, not a bug — sounds will play reliably from the user's first real interaction onward.

Using your own audio (the url prop)

Prefer your own sound file instead of the built-in catalog? Pass a url instead of sound in either hover or click:

<Interactive
  click={{
    url: "https://github.com/mastodon/mastodon/raw/refs/heads/main/public/sounds/boop.mp3",
    volume: 0.8,
  }}
>
  <button>Notify</button>
</Interactive>

Pass either sound (a built-in name) or url (any external audio link) per event — not both at once. This is handy if you want a custom brand sound without publishing your own package or forking the sound catalog.

Sound catalog (168 sounds)

| Category | Count | Example names | |---|---|---| | bubble | 8 | bubble-pop-01 ... bubble-pop-08 | | celebrate | 11 | celebrate-01 ... celebrate-11 | | correct | 6 | correct-01 ... correct-06 | | error | 10 | error-01 ... error-10 | | laser | 10 | laser-01 ... laser-10 | | mouse-click | 11 | mouse-click-01 ... mouse-click-11 | | notification | 38 | notification-01 ... notification-37, among-us | | page-flip | 10 | page-flip-01 ... page-flip-10 | | success | 10 | success-01 ... success-10 | | transition | 28 | transition-01 ... transition-28 | | upgrade | 26 | upgrade-01 ... upgrade-26 |

Full list is fully typed — your editor will autocomplete every valid SoundName as you type.

Examples

Button with hover + click feedback

<Interactive
  hover={{ sound: "mouse-click-04", volume: 0.5 }}
  click={{ sound: "success-05", volume: 0.9 }}
>
  <button className="btn-primary">Get Started</button>
</Interactive>

Notification badge

<Interactive click={{ sound: "notification-11", volume: 0.8 }}>
  <span className="badge">3</span>
</Interactive>

Card with hover feedback

<Interactive hover={{ sound: "page-flip-02", volume: 0.4 }}>
  <div className="card">
    <img src="/thumbnail.png" alt="" />
    <h3>Project Title</h3>
  </div>
</Interactive>

Image / icon button

<Interactive
  hover={{ sound: "bubble-pop-03", volume: 0.5 }}
  click={{ sound: "celebrate-01", volume: 1 }}
>
  <img src="/like-icon.svg" alt="Like" className="icon-button" />
</Interactive>

Custom component wrapped directly

function Button01() {
  return (
    <div>
      <button>Click Me</button>
    </div>
  );
}

<Interactive click={{ sound: "success-01" }}>
  <Button01 />
</Interactive>

External audio via URL

<Interactive
  click={{
    url: "https://github.com/mastodon/mastodon/raw/refs/heads/main/public/sounds/boop.mp3",
    volume: 0.8,
  }}
>
  <button>Play Custom Sound</button>
</Interactive>

API

type SoundConfig = {
  sound?: SoundName; // a built-in sound name, OR
  url?: string;       // any external audio file URL — pass one or the other
  volume?: number;     // 0 - 1, default 1
};

type InteractiveProps = {
  children: ReactNode; // any HTML tag or custom component
  hover?: SoundConfig;
  click?: SoundConfig;
};

License

MIT © Dikshant Gulekar