Catch Hook Setup Integration Block for React

Everything. The address is an example in the shape of a Catch Hook address with placeholder ids, Copy only copies that text, and Send a sample only fills the tree and changes the status line. Nothing is sent to or from Zapier. Wire your own address, request and field check where the demo changes state.

It is an event of Webhooks by Zapier: when you use it as a Zap's trigger, Zapier gives you an address of its own, and the Zap starts whenever something sends a request to it. After a sample arrives, Zapier lists the fields it caught so you can use them in later steps. The block shows that hand-off for a form tool; the field names and the values are example data.

From the sample: SAMPLE is a typed object, and the count and the field names are its keys, so adding a key to it changes the line, the tree and the caption together. A list inside it, like services, is one field whose branch opens in the tree.

The tree is the catalog's JSON Tree View: Tab moves into it, the arrow keys move between nodes and open or close branches, and the window scrolls if it needs to. Before the sample is sent the tree is hidden from assistive technology and the empty-state sentence is shown instead. The three steps are headings in a list, each starting "To do:" or "Done:" for screen readers, and the status line is a polite live region.

Because the check has to have something to check. Until a sample has been sent the button is marked unavailable, and pressing it says so in the status line. Pressing Send a sample again after finishing takes the connection back to unfinished.

On a phone the steps come first and the tree window sits under them, scrolling inside its own frame. In a right-to-left layout the split and the rail mirror; the address, the field names and the tree keep their own left-to-right direction. The header fades up once on load, and reduced motion turns that off.