A typed event system for your frontend.
Fox Events is a lightweight CustomEvent-based pub/sub. Emit and listen with history, optional IndexedDB persistence, plus a React Native WebView bridge.
Install
npm install fox-eventsyarn
yarn add fox-events
Quickstart
ts
import { Fox } from "fox-events";
const userLogin = Fox.channel<{ userId: string }>("user:login");
userLogin.on((payload) => {
console.log("Login:", payload.userId);
});
userLogin.emit({ userId: "u-1" });
const first = await userLogin.once();
console.log("First login:", first.userId);
Everything you need. Nothing you don’t.
A small API with great typing and debuggability, designed for apps, micro-frontends, and integrations.
Typed channels
Use Fox.channel<T>() to type emit/on/once safely.
Sync + async
emit() instantly or emitAsync() while awaiting persistence when needed.
Trail (history)
Inspect published/received/unsubscribed and export text for debugging.
Optional persistence
IndexedDB persistence via fox-events/storage (autoPersist + hydrate).
Scopes
Isolation with Fox.forScope() — great for micro-frontends.
RN <-> WebView bridge
Events between React Native and WebView via postMessage, with filter + direction.
Docs (by module)
Getting started
Install, channels, emit, on, once, trail
Publishers and listeners
Mental model: who publishes, who listens, channel, on vs once, timeout, best practices
Trail (History)
Event trail, published/received/unsubscribed, toText, maxHistory, global trail
Storage
IndexedDB persistence, hydrate, keyPrefix
Bridge React Native
RN ↔ WebView messaging
Managing bridge and adapter
Ways to manage the bridge (web) and createFoxRNAdapter (RN): global, dispose, Provider, useFox
Middleware
useMiddleware, onEmit hooks
Scoped Channels
Fox.forScope, isolated registries
EventMap
Typed static emit/on/once
Centralizing events (foxes.ts)
Best practices for a single event map and channels
Use cases
Micro-frontends, wizards, dashboards, games, e-commerce, plugins, and more