React Components

Embeddable React components for displaying webhook events, webhook health, and delivery timelines in your own app.

Install

bashterminal

npm install @hostwebhook/react

ℹRequires an API Key from the dashboard. Go to Settings → API Keys to create one with the scopes you need (e.g. events:read, webhooks:read).

Provider setup

Wrap your app (or the section that uses HostWebhook components) with the provider:

tsxapp.tsx

import { HostWebhookProvider } from '@hostwebhook/react';
import '@hostwebhook/react/styles.css';

function App() {
  return (
    <HostWebhookProvider
      apiKey="hwk_..."
      baseUrl="https://api.hostwebhook.com"
      refreshInterval={30000}
    >
      <YourDashboard />
    </HostWebhookProvider>
  );
}

WebhookEventLog

Paginated table of webhook events with status filters.

tsxevent-log.tsx

import { WebhookEventLog } from '@hostwebhook/react';

<WebhookEventLog
  webhookId="ep_abc123"
  limit={15}
  showFilters
  onEventClick={(event) => console.log('Clicked:', event.id)}
/>

WebhookStatus

Health badge showing a webhook's status (healthy / degraded / down).

tsxwebhook-status.tsx

import { WebhookStatus } from '@hostwebhook/react';

<WebhookStatus webhookId="ep_abc123" showDetails />

DeliveryTimeline

Vertical timeline of delivery attempts for a specific event.

tsxdelivery-timeline.tsx

import { DeliveryTimeline } from '@hostwebhook/react';

<DeliveryTimeline eventId="evt_xyz789" />

Hooks

Use hooks directly if you want full control over rendering:

tsxcustom-ui.tsx

import { useEvents, useWebhook, useDeliveries } from '@hostwebhook/react';

function MyEvents() {
  const { data, loading, error } = useEvents({
    webhookId: 'ep_abc123',
    status: 'failed',
    limit: 10,
    page: 1,
  });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {data?.events.map(e => (
        <li key={e.id}>{e.eventType} — {e.status}</li>
      ))}
    </ul>
  );
}

Theming

Override CSS custom properties to match your brand:

csscustom-theme.css

:root {
  --hwk-color-bg: #1a1a2e;
  --hwk-color-text: #e0e0e0;
  --hwk-color-border: #333;
  --hwk-color-success: #10b981;
  --hwk-color-error: #ef4444;
  --hwk-radius: 8px;
}