@foleyjs/react

React bindings for Foley — sound effects for the interface, performed live.

npm install @foleyjs/core @foleyjs/react

import { useFoley } from "@foleyjs/react";

function App() {
  const { play } = useFoley({ volume: 0.7, theme: "soft" });
  return (
    <>
      <button data-foley-press data-foley-release onClick={() => play("success")}>
        Save
      </button>
      <a data-foley-hover="tick">Docs</a>
    </>
  );
}

useFoley() calls bind() once on mount (StrictMode-safe — it's idempotent) and returns { play, set, get, toWav, toBuffer, on, bind }. Everything from @foleyjs/core is also re-exported, so one import covers both.

Full documentation → · Live demo →

MIT © eakbulut and Foley contributors.