Webhooks
Endpoints that get your events, with a test button and a signing secret shown once.
SourcePackage @kerf-js/veneer
Preview
tsx
import { state } from '@kerf-js/core'import { Toaster, Webhooks } from '@kerf-js/veneer'import type { Webhook } from '@kerf-js/veneer'export function Endpoints() { const hooks = state<readonly Webhook[]>(WEBHOOKS) const add = async (url: string, events: string[]) => { await wait(500) hooks.value = [ ...hooks.value, { id: url, url, events, healthy: true }, ] return 'whsec_sample_not_a_real_secret' } const test = async () => { await wait(400) return { status: 200, ms: 82 } } return ( <> <Webhooks hooks={hooks} events={WEBHOOK_EVENTS} onAdd={add} onTest={test} /> <Toaster /> </> )}const WEBHOOKS: Webhook[] = [ { id: 'h1', url: 'https://hooks.kerf.dev/deploys', events: ['deploy.succeeded', 'deploy.failed'], lastDelivery: '200 · 18 min ago', healthy: true, }, { id: 'h2', url: 'https://ops.kerf.dev/alerts', events: ['deploy.failed'], lastDelivery: '503 · 1 h ago', healthy: false, },]const WEBHOOK_EVENTS = [ 'deploy.succeeded', 'deploy.failed', 'deploy.rolled_back', 'member.added',]const min = 60_000const wait = (ms: number) => new Promise<void>((done) => { setTimeout(done, ms) })Installation
npm install @kerf-js/veneerUsage
tsx
import { Webhooks } from '@kerf-js/veneer'Accessibility
- This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and veneer's parts keep their roles and labels.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
hooks | readonly Webhook[] | State<readonly Webhook[]> | — | The endpoints. |
events | string[] | — | The events people can pick. |
| Event | Type | Default | Description |
|---|---|---|---|
onAdd | (url: string, events: string[]) => Promise<string> | — | Adds the endpoint and returns its signing secret. |
onTest | (hook: Webhook) => Promise<{ status: number; ms: number; }> | — | Sends a sample event and returns the status and time. |
RelatedApi keysIntegrations grid