\n )}\n \n \n )\n }\n ```\n\n How you render the UI Extension here is completely up to you; no third\n party code runs here.\n\n5. Add another React component that renders the Add-on third-party content\n once it is triggered by your product:\n\n ```jsx\n import React from \"react\"\n\n import {\n UiExtensionDataContext,\n UiExtensionThirdPartyComponent,\n } from \"@planningcenter/add-ons\"\n\n export default function ProfileTabContent({ extensionId }) {\n return (\n \n \n \n )\n }\n ```\n\n## Usage by Add-ons\n\nThis library takes care of rendering third-party React components, i.e. UI Extensions, in\nthe remote-ui sandbox. There is a bit of boilerplate that every UI Extension will need to\nuse to cooperate with the rendering process. Here is an example UI Extension component:\n\n```jsx\n// people.profile.custom_tab.jsx\n\nimport React, { useEffect, useState } from \"react\"\nimport { render } from \"@remote-ui/react\"\n\nconst Text = \"Text\"\n\nfunction App() {\n return Hello world\n}\n\nself.onRender((root, args) => {\n render(, root, () => root.mount())\n})\n```\n\nThis boilerplate _should_ be generated by [add-ons-cli](https://github.com/planningcenter/add-ons-cli).\n\n### Arguments\n\nEach UI Extension component get passed arguments, including any callbacks, from the\nhost application. These arguments can be used to give the component additional needed\ncontext to do its job (remember that the sandboxed component runs in a Web Worker\nand has no access to the host environment).\n\nOn the host:\n\n```jsx\n console.log(\"callback on host\"),\n }}\n/>\n```\n\nIn the Add-on:\n\n```jsx\nfunction App({ hostOnClick }) {\n return (\n <>\n
\n {title}\n