shadcn.io is not affiliated with official shadcn/ui
Webhook Received Notification Block for React Aria
One incoming webhook in a split frame: its source, event, delivery id and times in a data list, the payload as an expandable JSON tree with a Copy, and a Replay delivery that counts deliveries on the page.
Installation
Overview
Let a developer see exactly what arrived and send it again, with this webhook notification for React with React Aria. It is Hookrelay, a webhook inspector, in a hairline frame with a plus mark on each corner, split in two. At the start a Data List of the delivery: who sent it, the event, the delivery id in mono, when it was received and how many times it has been delivered, then Replay delivery, the one Shine Button. At the end the payload as an expandable JSON Tree View in a window of fixed height, with a Copy Button for the whole body. Replay counts a delivery and says "Delivered 2 times, in this demo." On a phone the two cells stack. Guides draw the frame and the divider. For webhook consoles, API dashboards and any event that arrives with a body.
FAQ
How do I show my own webhook?
Edit BODY (the payload as an object), SOURCE, EVENT, DELIVERY and RECEIVED. The tree reads the object as it is, expands two levels and hides array lengths; the Copy puts the same object on the clipboard as indented JSON. In your app pass the body you stored for the delivery.
What does Replay delivery do?
It counts: each press adds a delivery on this page, writes "Delivered 2 times, in this demo" with the time of the last one, and nothing is sent to any URL. After four replays it stops and says that is the most the demo does. A reload starts again at one. In your app call your replay endpoint from replay and add the new attempt it returns.
Where do the replay times come from?
From the typed REPLAYS list, in order, so the page reads the same for everyone and never reads a clock. The first delivery is RECEIVED.