Getting Started

@protoworx/react-ripple-effect is a tiny, hook-based event bus for React that lets your components communicate via named events.

Install

npm install @protoworx/react-ripple-effect

Basic Setup

Listening for events…

"use client";

import {
  EventDriver,
  EventProvider,
  useMonitorEvent,
  useTriggerEvent,
} from "@protoworx/react-ripple-effect";

const client = new EventDriver();

export default function App() {
  return (
    <EventProvider client={client}>
      <TriggerEventButton />
      <MonitorEventLog />
    </EventProvider>
  );
}

function TriggerEventButton() {
  const trigger = useTriggerEvent();

  return (
    <button onClick={() => trigger("test", "Hello, world!")}>
      Trigger Event
    </button>
  );
}

function MonitorEventLog() {
  useMonitorEvent({
    test: (data: string) => {
      console.log("Test event:", data);
    },
  });

  return <div>Listening for "test" events…</div>;
}

Getting Started

Install

Basic Setup

On this page