Skip to content
Netlify SDK Docs Netlify SDK Docs 1.38.2

Make the UI reactive

There are cases where an interaction with an element should affect other elements in the integration’s UI. For example, you may want a user to be able to select a ”Show details” button to reveal other elements.

To do this, use the state provided in callback functions to select and change elements. Below is an example using a button element. Use the picker object to retrieve elements from the UI and adjust the UI to control which elements are displayed:

src/ui/index.ts
route.addButton({
  title: "Show details",
  id: "show-details-button",
  callback: async (surfaceState) => {
    const { picker } = surfaceState;


    const detailsSection = picker?.getElementById<UIElementSectionOptions>("details-section");


    if (detailsSection) {
      detailsSection.display = "visible";
    }
  },
});
route.addSection({
  title: "Details",
  id: "details-section",
  display: "hidden",
  // ...
});