Getting Started

To use the react-embed-sdk in your project, you can install it using your node package manager.

Using npm:

``code npm install @sigmacomputing/react-embed-sdk`

yarn:

`code yarn add @sigmacomputing/react-embed-sdk`

pnpm:

`code pnpm add @sigmacomputing/react-embed-sdk`

`Documentation`

`$3`

The library provides hooks that combine the lower level listeners and mutations to provide a more ergonomic API.

#### useSigmaIframe

A hook that returns a ref to be used with a Sigma iframe element, and the loading and error state of the embed.

`typescript useSigmaIframe(): { iframeRef: React.RefObject; loading: boolean; error: WorkbookErrorEvent | null; variables: Record | undefined; }`

Example usage:

`tsx function MyEmbed() { const { iframeRef, loading, error } = useSigmaIframe(); return ( <> {loading &&

Loading...

}
      {error && Error: {error.message}
}
              className={loading || error ? "hidden" : "show"}
        ref={iframeRef}
        {/ The embed url to load /}
        src="https://app.sigmacomputing.com/embed"
      />
    
  );
}


#### useWorkbookVariables
A hook that returns functions to get and set the variables in a workbook.

`typescript useWorkbookVariables(iframeRef: React.RefObject): { getVariables: () => Promise>; setVariables: (variables: Record) => void; }`

Example usage:

`tsx function MyEmbed() { const { getVariables, setVariables } = useWorkbookVariables(iframeRef); return ( <> onClick={async () => { const variable = await getVariables(); }} name="get-variables" > Get Filters <br /> </><br /> );<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### usePageHeight</p><p class="my-3">A hook that returns the height of the page in the iframe. This HAS to be used with the responsive_height <a href="https://help.sigmacomputing.com/docs/embed-url-parameters" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">URL Parameter</a>.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />usePageHeight(iframeRef: React.RefObject<HTMLIFrameElement>): number | undefined<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Example usage:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />function MyEmbed() {<br /> const { iframeRef } = useSigmaIframe();<br /> const height = usePageHeight(iframeRef);<br /> return (<br /> <><br /> <iframe<br /> style={{ height }}<br /> ref={iframeRef}<br /> src="https://app.sigmacomputing.com/embed?:responsive_height=true"<br /> /><br /> </><br /> );<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">These are functions that can be used to listen for events from the embed, and react to them.</p><p class="my-3">#### useWorkbookLoaded</p><p class="my-3">Listen for a workbook loaded event, and execute the given callback when it occurs.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />useWorkbookLoaded(iframeRef: React.RefObject<HTMLIFrameElement>, onLoaded: (event: WorkbookLoadedEvent) => void)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### useWorkbookError</p><p class="my-3">Listen for a workbook error event, and execute the given callback when it occurs.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />useWorkbookError(iframeRef: React.RefObject<HTMLIFrameElement>, onError: (event: WorkbookErrorEvent) => void)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### useWorkbookDataLoaded</p><p class="my-3">Listen for a workbook data loaded event, and execute the given callback when it occurs.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />useWorkbookDataLoaded(iframeRef: React.RefObject<HTMLIFrameElement>, onDataLoaded: (event: WorkbookDataLoadedEvent) => void)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### useVariableChange</p><p class="my-3">Listen for a workbook variable change event, and execute the given callback when it occurs.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />useVariableChange(iframeRef: React.RefObject<HTMLIFrameElement>, onVariableChange: (event: WorkbookVariableOnChangeEvent) => void)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### useTableCellSelect</p><p class="my-3">Listen for a table cell select event, and execute the given callback when it occurs.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />useTableCellSelect(iframeRef: React.RefObject<HTMLIFrameElement>, onTableCellSelect: (event: WorkbookTableCellSelectEvent) => void)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### useWorkbookPublished</p><p class="my-3">Listen for a workbook published event, and execute the given callback when it occurs.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />useWorkbookPublished(iframeRef: React.RefObject<HTMLIFrameElement>, onWorkbookPublished: (event: WorkbookPublishedEvent) => void)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### useWorkbookFullScreen</p><p class="my-3">Listen for a workbook full screen event, and execute the given callback when it occurs.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />useWorkbookFullScreen(iframeRef: React.RefObject<HTMLIFrameElement>, onFullScreen: (event: WorkbookFullScreenEvent) => void)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### useWorkbookPageHeight</p><p class="my-3">Listen for a workbook page height event, and execute the given callback when it occurs. Needs to be used with the responsive_height <a href="https://help.sigmacomputing.com/docs/embed-url-parameters" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">URL Parameter</a>.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />useWorkbookPageHeight(iframeRef: React.RefObject<HTMLIFrameElement>, onPageHeight: (event: WorkbookPageHeightEvent) => void)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### useWorkbookSelectedNode</p><p class="my-3">Listen for a workbook selected node event, and execute the given callback when it occurs.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />useWorkbookSelectedNode(iframeRef: React.RefObject<HTMLIFrameElement>, onPageSelectedNode: (event: WorkbookSelectedNodeEvent) => void)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### useWorkbookPivotTableCellSelect</p><p class="my-3">Listen for a pivot table cell select event, and execute the given callback when it occurs.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />useWorkbookPivotTableCellSelect(iframeRef: React.RefObject<HTMLIFrameElement>, onPivotTableCellSelect: (event: WorkbookPivotTableCellSelectEvent) => void)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### useWorkbookChartValueSelect</p><p class="my-3">Listen for a chart value select event, and execute the given callback when it occurs.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />useWorkbookChartValueSelect(iframeRef: React.RefObject<HTMLIFrameElement>, onChartValueSelect: (event: WorkbookChartValueSelectEvent) => void)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### useWorkbookCurrentVariables</p><p class="my-3">Listen for a workbook current variables event, and execute the given callback when it occurs. This is to be used when </code>workbookVariablesList<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is called.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />useWorkbookCurrentVariables(iframeRef: React.RefObject<HTMLIFrameElement>, onCurrentVariables: (event: WorkbookCurrentVariablesEvent) => void)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### useWorkbookBookmarkOnCreate</p><p class="my-3">Listen for a workbook bookmark create event, and execute the given callback when it occurs.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />useWorkbookBookmarkOnCreate(iframeRef: React.RefObject<HTMLIFrameElement>, onBookmarkCreate: (event: WorkbookBookmarkOnCreateEvent) => void)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### useWorkbookBookmarkOnChange</p><p class="my-3">Listen for a workbook bookmark change event, and execute the given callback when it occurs.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />useWorkbookBookmarkOnChange(iframeRef: React.RefObject<HTMLIFrameElement>, onBookmarkChange: (event: WorkbookBookmarkOnChangeEvent) => void)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### useWorkbookBookmarkOnUpdate</p><p class="my-3">Listen for a workbook bookmark update event, and execute the given callback when it occurs.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />useWorkbookBookmarkOnUpdate(iframeRef: React.RefObject<HTMLIFrameElement>, onBookmarkUpdate: (event: WorkbookBookmarkOnUpdateEvent) => void)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### useWorkbookBookmarkOnDelete</p><p class="my-3">Listen for a workbook bookmark delete event, and execute the given callback when it occurs.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />useWorkbookBookmarkOnDelete(iframeRef: React.RefObject<HTMLIFrameElement>, onBookmarkDelete: (event: WorkbookBookmarkOnDeleteEvent) => void)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### useWorkbookChartError</p><p class="my-3">Listen for a workbook chart error event, and execute the given callback when it occurs.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />useWorkbookChartError(iframeRef: React.RefObject<HTMLIFrameElement>, onChartError: (event: WorkbookChartErrorEvent) => void)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### useWorkbookExploreKeyOnChange</p><p class="my-3">Listen for a workbook explore key change event, and execute the given callback when it occurs.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />useWorkbookExploreKeyOnChange(iframeRef: React.RefObject<HTMLIFrameElement>, onExploreKeyOnChange: (event: WorkbookExploreKeyOnChangeEvent) => void)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### useUrlOnChange</p><p class="my-3">Listen for a url change event, and execute the given callback when it occurs.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />useUrlOnChange(iframeRef: React.RefObject<HTMLIFrameElement>, onUrlChange: (event: UrlOnChangeEvent) => void)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### useWorkbookIdOnChange</p><p class="my-3">Listen for a workbook id change event, and execute the given callback when it occurs.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />useWorkbookIdOnChange(iframeRef: React.RefObject<HTMLIFrameElement>, onWorkbookIdChange: (event: WorkbookIdOnChangeEvent) => void)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">These are functions that can be used to send messages to the embed. They may cause an event to be emitted from the embed.</p><p class="my-3">#### getWorkbookVariables</p><p class="my-3">Send a message to the embed to list the current variables. This will cause a </code>workbook:variables:current<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> event to be emitted from the embed, and can be used with the </code>useWorkbookCurrentVariables<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> function.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />getWorkbookVariables(iframeRef: React.RefObject<HTMLIFrameElement>)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### updateWorkbookVariables</p><p class="my-3">Send a message to the embed to update the variables.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />updateWorkbookVariables(iframeRef: React.RefObject<HTMLIFrameElement>, variables: Record<string, string>)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### createWorkbookBookmark</p><p class="my-3">Send a message to the embed to create a bookmark.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />createWorkbookBookmark(iframeRef: React.RefObject<HTMLIFrameElement>, bookmark: WorkbookBookmarkCreateEvent)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### updateWorkbookBookmark</p><p class="my-3">Send a message to the embed to update the current bookmark.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />updateWorkbookBookmark(iframeRef: React.RefObject<HTMLIFrameElement>)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### deleteWorkbookBookmark</p><p class="my-3">Send a message to the embed to delete the given bookmark.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />deleteWorkbookBookmark(iframeRef: React.RefObject<HTMLIFrameElement>, bookmarkId: string)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### selectWorkbookBookmark</p><p class="my-3">Send a message to the embed to select the given bookmark. If no bookmarkId is provided, the current bookmark will be deselected.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />selectWorkbookBookmark(iframeRef: React.RefObject<HTMLIFrameElement>, bookmarkId?: string)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### updateWorkbookFullscreen</p><p class="my-3">Send a message to the embed to toggle the fullscreen state of the given element.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />updateWorkbookFullscreen(iframeRef: React.RefObject<HTMLIFrameElement>, nodeId: string | null)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### updateWorkbookSelectedNodeId</p><p class="my-3">Send a message to the embed to update the selected element. Can be a pageId or elementId.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />updateWorkbookSelectedNodeId(iframeRef: React.RefObject<HTMLIFrameElement>, nodeId: string, nodeType: "element" | "page")<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### updateWorkbookSharingLink</p><p class="my-3">Send a message to the embed to update the sharing link.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />updateWorkbookSharingLink(iframeRef: React.RefObject<HTMLIFrameElement>, sharingLink: string | null, sharingExplorationLink?: string | null)<br /></code>``<br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div><div class="space-y-8"><div class="flex flex-col gap-6 lg:flex-row lg:gap-8"><div class="flex-1 space-y-4"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-10 w-64"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-full max-w-xl"></div><div class="flex gap-2"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-16"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-20"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-14"></div></div></div><div class="w-full lg:w-80"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-32 w-full"></div></div></div><div class="space-y-4"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-10 w-64"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-64 w-full"></div></div></div></main></div><script>requestAnimationFrame(function(){$RT=performance.now()});</script><script src="/_next/static/chunks/9b9784636e791b20.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[39756,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"default\"]\n3:I[37457,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"default\"]\n4:I[49786,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"Header\"]\n5:I[22016,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"\"]\nc:I[68027,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"default\"]\nd:I[2355,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"Analytics\"]\nf:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"OutletBoundary\"]\n10:\"$Sreact.suspense\"\n12:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"ViewportBoundary\"]\n14:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"MetadataBoundary\"]\n:HL[\"/_next/static/chunks/60ba853f5ed1b16b.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"style\"]\n:HL[\"/_next/static/chunks/9c76f6dd8b5c38e2.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"style\"]\n:HL[\"/_next/static/media/68d403cf9f2c68c5-s.p.f9f15f61.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/797e433ab948586e-s.p.dbea232f.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/caa3a2e1cccd8315-s.p.853070df.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"x_DymHuNhDTJUp7Mmr_Ru\",\"c\":[\"\",\"package\",\"%40sigmacomputing%2Freact-embed-sdk\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"package\",{\"children\":[[\"name\",\"%40sigmacomputing/react-embed-sdk\",\"c\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/60ba853f5ed1b16b.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/9c76f6dd8b5c38e2.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"font-sans antialiased\",\"children\":[[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"div\",null,{\"className\":\"min-h-screen bg-background\",\"children\":[[\"$\",\"$L4\",null,{}],[\"$\",\"main\",null,{\"className\":\"mx-auto flex max-w-md flex-col items-center justify-center px-4 py-24 text-center\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-package mb-6 h-16 w-16 text-muted-foreground\",\"children\":[[\"$\",\"path\",\"1a0edw\",{\"d\":\"M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z\"}],[\"$\",\"path\",\"d0xqtd\",{\"d\":\"M12 22V12\"}],[\"$\",\"path\",\"yx3hmr\",{\"d\":\"m3.3 7 7.703 4.734a2 2 0 0 0 1.994 0L20.7 7\"}],[\"$\",\"path\",\"1c824w\",{\"d\":\"m7.5 4.27 9 5.15\"}],\"$undefined\"]}],[\"$\",\"h1\",null,{\"className\":\"mb-2 text-3xl font-bold\",\"children\":\"404\"}],[\"$\",\"h2\",null,{\"className\":\"mb-4 text-xl text-muted-foreground\",\"children\":\"Page not found\"}],[\"$\",\"p\",null,{\"className\":\"mb-8 text-muted-foreground\",\"children\":\"The page you're looking for doesn't exist or has been moved.\"}],[\"$\",\"div\",null,{\"className\":\"flex gap-3\",\"children\":[[\"$\",\"$L5\",null,{\"href\":\"/\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-house mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"path\",\"5wwlr5\",{\"d\":\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\"}],[\"$\",\"path\",\"1d0kgt\",{\"d\":\"M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"}],\"$undefined\"]}],\"Go home\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 has-[\u003esvg]:px-3\",\"ref\":null}],[\"$\",\"$L5\",null,{\"href\":\"/search\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-search mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"circle\",\"4ej97u\",{\"cx\":\"11\",\"cy\":\"11\",\"r\":\"8\"}],[\"$\",\"path\",\"1qie3q\",{\"d\":\"m21 21-4.3-4.3\"}],\"$undefined\"]}],\"Search packages\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[\u003esvg]:px-3\",\"ref\":null}]]}]]}]]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}],\"$L6\"]}]}]]}],{\"children\":[\"$L7\",{\"children\":[\"$L8\",{\"children\":[\"$L9\",{},null,false,false]},[\"$La\",[],[]],false,false]},null,false,false]},null,false,false],\"$Lb\",false]],\"m\":\"$undefined\",\"G\":[\"$c\",[]],\"S\":false}\n"])</script><script>self.__next_f.push([1,"6:[\"$\",\"$Ld\",null,{}]\n7:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n8:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n9:[\"$\",\"$1\",\"c\",{\"children\":[\"$Le\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$Lf\",null,{\"children\":[\"$\",\"$10\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@11\"}]}]]}]\na:null\nb:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L12\",null,{\"children\":\"$L13\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L14\",null,{\"children\":[\"$\",\"$10\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L15\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\n"])</script><script>self.__next_f.push([1,"e:[\"$\",\"div\",null,{\"className\":\"min-h-screen bg-background\",\"children\":[[\"$\",\"$L4\",null,{}],[\"$\",\"main\",null,{\"className\":\"mx-auto max-w-6xl px-4 py-8\",\"children\":[\"$\",\"$10\",null,{\"fallback\":[\"$\",\"div\",null,{\"className\":\"space-y-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-6 lg:flex-row lg:gap-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex-1 space-y-4\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-10 w-64\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-full max-w-xl\"}],[\"$\",\"div\",null,{\"className\":\"flex gap-2\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-16\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-20\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-14\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"w-full lg:w-80\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-32 w-full\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"space-y-4\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-10 w-64\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-64 w-full\"}]]}]]}],\"children\":\"$L16\"}]}]]}]\n"])</script><script>self.__next_f.push([1,"13:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"17:I[27201,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"IconMark\"]\n11:null\n15:[[\"$\",\"title\",\"0\",{\"children\":\"@sigmacomputing/react-embed-sdk - npm explorer\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"React JavaScript SDK to interact with Sigma Computing's Embed API\"}],[\"$\",\"link\",\"2\",{\"rel\":\"icon\",\"href\":\"/icon-light-32x32.png\",\"media\":\"(prefers-color-scheme: light)\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/icon-dark-32x32.png\",\"media\":\"(prefers-color-scheme: dark)\"}],[\"$\",\"link\",\"4\",{\"rel\":\"icon\",\"href\":\"/icon.svg\",\"type\":\"image/svg+xml\"}],[\"$\",\"link\",\"5\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-icon.png\"}],[\"$\",\"$L17\",\"6\",{}]]\n"])</script><title>@sigmacomputing/react-embed-sdk - npm explorer</title><meta name="description" content="React JavaScript SDK to interact with Sigma Computing's Embed API"/><link rel="icon" href="/icon-light-32x32.png" media="(prefers-color-scheme: light)"/><link rel="icon" href="/icon-dark-32x32.png" media="(prefers-color-scheme: dark)"/><link rel="icon" href="/icon.svg" type="image/svg+xml"/><link rel="apple-touch-icon" href="/apple-icon.png"/><script >document.querySelectorAll('body link[rel="icon"], body link[rel="apple-touch-icon"]').forEach(el => document.head.appendChild(el))</script><div style="display:none" id="S:2"></div><script>$RB=[];$RV=function(a){$RT=performance.now();for(var b=0;b<a.length;b+=2){var c=a[b],e=a[b+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&requestAnimationFrame(g._reactRetry)}}a.length=0}; $RC=function(a,b){if(b=document.getElementById(b))(a=document.getElementById(a))?(a.previousSibling.data="$~",$RB.push(a,b),2===$RB.length&&("number"!==typeof $RT?requestAnimationFrame($RV.bind(null,$RB)):(a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:$RT+300-a)))):b.parentNode.removeChild(b)};$RC("B:2","S:2")</script><div style="display:none" id="S:0"></div><script>$RC("B:0","S:0")</script><script>self.__next_f.push([1,"16:[\"$\",\"div\",null,{\"className\":\"space-y-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-6 lg:flex-row lg:gap-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex-1 space-y-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap items-start gap-3\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"font-mono text-2xl font-bold sm:text-3xl\",\"children\":\"@sigmacomputing/react-embed-sdk\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-wrap items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 font-mono\",\"children\":[\"v\",\"0.7.0\"]}],[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden [a\u0026]:hover:bg-accent [a\u0026]:hover:text-accent-foreground text-blue-600 border-blue-200\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-file-code mr-1 h-3 w-3\",\"children\":[[\"$\",\"path\",\"1tg20x\",{\"d\":\"M10 12.5 8 15l2 2.5\"}],[\"$\",\"path\",\"yinavb\",{\"d\":\"m14 12.5 2 2.5-2 2.5\"}],[\"$\",\"path\",\"tnqrlb\",{\"d\":\"M14 2v4a2 2 0 0 0 2 2h4\"}],[\"$\",\"path\",\"1mlx9k\",{\"d\":\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z\"}],\"$undefined\"]}],\"TypeScript\"]}],\"$undefined\"]}]]}],\"$undefined\",[\"$\",\"p\",null,{\"className\":\"text-lg text-muted-foreground\",\"children\":\"React JavaScript SDK to interact with Sigma Computing's Embed API\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-1.5\",\"children\":[[\"$\",\"$L5\",\"embed\",{\"href\":\"/search?q=embed\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a\u0026]:hover:bg-accent [a\u0026]:hover:text-accent-foreground text-xs font-normal hover:bg-accent\",\"children\":\"embed\"}]}],[\"$\",\"$L5\",\"sdk\",{\"href\":\"/search?q=sdk\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a\u0026]:hover:bg-accent [a\u0026]:hover:text-accent-foreground text-xs font-normal hover:bg-accent\",\"children\":\"sdk\"}]}],[\"$\",\"$L5\",\"sigma\",{\"href\":\"/search?q=sigma\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a\u0026]:hover:bg-accent [a\u0026]:hover:text-accent-foreground text-xs font-normal hover:bg-accent\",\"children\":\"sigma\"}]}],\"$L18\"]}],\"$L19\",\"$L1a\"]}],\"$L1b\"]}],\"$L1c\"]}]\n"])</script><script>self.__next_f.push([1,"1d:I[33485,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"InstallCommands\"]\n1e:I[27341,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"Tabs\"]\n1f:I[27341,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"TabsList\"]\n20:I[27341,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"TabsTrigger\"]\n21:I[27341,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"TabsContent\"]\n22:I[77801,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"ReadmeViewer\"]\n18:[\"$\",\"$L5\",\"react\",{\"href\":\"/search?q=react\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a\u0026]:hover:bg-accent [a\u0026]:hover:text-accent-foreground text-xs font-normal hover:bg-accent\",\"children\":\"react\"}]}]\n"])</script><script>self.__next_f.push([1,"19:[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-4 text-sm text-muted-foreground\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-download h-4 w-4\",\"children\":[[\"$\",\"path\",\"ih7n3h\",{\"d\":\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"}],[\"$\",\"polyline\",\"2ggqvy\",{\"points\":\"7 10 12 15 17 10\"}],[\"$\",\"line\",\"1vk2je\",{\"x1\":\"12\",\"x2\":\"12\",\"y1\":\"15\",\"y2\":\"3\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"9.8K\"}],\"/week\"]}],[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-4 w-4\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],\"Updated \",\"2 days ago\"]}],[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-scale h-4 w-4\",\"children\":[[\"$\",\"path\",\"7g6ntu\",{\"d\":\"m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z\"}],[\"$\",\"path\",\"ijws7r\",{\"d\":\"m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z\"}],[\"$\",\"path\",\"1b0cd5\",{\"d\":\"M7 21h10\"}],[\"$\",\"path\",\"108xh3\",{\"d\":\"M12 3v18\"}],[\"$\",\"path\",\"3gwbw2\",{\"d\":\"M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2\"}],\"$undefined\"]}],\"MIT\"]}],[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[\"Unpacked: \",\"67.0 KB\"]}]]}]\n"])</script><script>self.__next_f.push([1,"1a:[\"$\",\"div\",null,{\"className\":\"text-sm\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-muted-foreground\",\"children\":\"Published by \"}],[\"$\",\"$L5\",null,{\"href\":\"/~sigmacomputing\",\"className\":\"font-medium hover:underline\",\"children\":\"sigmacomputing\"}]]}]\n"])</script><script>self.__next_f.push([1,"1b:[\"$\",\"div\",null,{\"className\":\"w-full space-y-4 lg:w-80\",\"children\":[[\"$\",\"$L1d\",null,{\"packageName\":\"@sigmacomputing/react-embed-sdk\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2\",\"children\":[[\"$\",\"a\",null,{\"href\":\"https://github.com/sigmacomputing/embed-sdk\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-github mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"path\",\"tonef\",{\"d\":\"M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4\"}],[\"$\",\"path\",\"9comsn\",{\"d\":\"M9 18c-4.51 2-5-2-7-2\"}],\"$undefined\"]}],\"Repository\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[\u003esvg]:px-2.5\",\"ref\":null}],[\"$\",\"a\",null,{\"href\":\"https://sigmacomputing.com\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-house mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"path\",\"5wwlr5\",{\"d\":\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\"}],[\"$\",\"path\",\"1d0kgt\",{\"d\":\"M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"}],\"$undefined\"]}],\"Homepage\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[\u003esvg]:px-2.5\",\"ref\":null}],\"$undefined\",[\"$\",\"a\",null,{\"href\":\"https://npmjs.com/package/@sigmacomputing/react-embed-sdk\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-external-link mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"path\",\"1q9fwt\",{\"d\":\"M15 3h6v6\"}],[\"$\",\"path\",\"gplh6r\",{\"d\":\"M10 14 21 3\"}],[\"$\",\"path\",\"a6xqqp\",{\"d\":\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"}],\"$undefined\"]}],\"npm\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[\u003esvg]:px-2.5\",\"ref\":null}]]}],false]}]\n"])</script><script>self.__next_f.push([1,"23:T298b,"])</script><script>self.__next_f.push([1,"## Getting Started\n\nTo use the react-embed-sdk in your project, you can install it using your node package manager.\n\n**Using npm:**\n\n```code\nnpm install @sigmacomputing/react-embed-sdk\n```\n\n**yarn:**\n\n```code\nyarn add @sigmacomputing/react-embed-sdk\n```\n\n**pnpm:**\n\n```code\npnpm add @sigmacomputing/react-embed-sdk\n```\n\n## Documentation\n\n### Hooks\n\nThe library provides hooks that combine the lower level [listeners](#listeners) and [mutations](#mutations) to provide a more ergonomic API.\n\n#### useSigmaIframe\n\nA hook that returns a ref to be used with a Sigma iframe element, and the loading and error state of the embed.\n\n```typescript\nuseSigmaIframe(): {\n iframeRef: React.RefObject\u003cHTMLIFrameElement\u003e;\n loading: boolean;\n error: WorkbookErrorEvent | null;\n variables: Record\u003cstring, string\u003e | undefined;\n}\n```\n\nExample usage:\n\n```tsx\nfunction MyEmbed() {\n const { iframeRef, loading, error } = useSigmaIframe();\n return (\n \u003c\u003e\n {loading \u0026\u0026 \u003cp\u003eLoading...\u003c/p\u003e}\n {error \u0026\u0026 \u003cp\u003eError: {error.message}\u003c/p\u003e}\n \u003ciframe\n className={loading || error ? \"hidden\" : \"show\"}\n ref={iframeRef}\n {/* The embed url to load */}\n src=\"https://app.sigmacomputing.com/embed\"\n /\u003e\n \u003c/\u003e\n );\n}\n```\n\n#### useWorkbookVariables\n\nA hook that returns functions to get and set the variables in a workbook.\n\n```typescript\nuseWorkbookVariables(iframeRef: React.RefObject\u003cHTMLIFrameElement\u003e): {\n getVariables: () =\u003e Promise\u003cRecord\u003cstring, string\u003e\u003e;\n setVariables: (variables: Record\u003cstring, string\u003e) =\u003e void;\n}\n```\n\nExample usage:\n\n```tsx\nfunction MyEmbed() {\n const { getVariables, setVariables } = useWorkbookVariables(iframeRef);\n return (\n \u003c\u003e\n \u003cbutton onClick={() =\u003e setVariables({ foo: \"bar\" }))} name=\"set-variables\"\u003eSet Filters\u003c/button\u003e\n \u003cbutton\n onClick={async () =\u003e {\n const variable = await getVariables();\n }}\n name=\"get-variables\"\n \u003e\n Get Filters\n \u003c/button\u003e\n \u003ciframe ref={iframeRef} src=\"https://app.sigmacomputing.com/embed\" /\u003e\n \u003c/\u003e\n );\n}\n```\n\n#### usePageHeight\n\nA hook that returns the height of the page in the iframe. This HAS to be used with the responsive_height [URL Parameter](https://help.sigmacomputing.com/docs/embed-url-parameters).\n\n```typescript\nusePageHeight(iframeRef: React.RefObject\u003cHTMLIFrameElement\u003e): number | undefined\n```\n\nExample usage:\n\n```tsx\nfunction MyEmbed() {\n const { iframeRef } = useSigmaIframe();\n const height = usePageHeight(iframeRef);\n return (\n \u003c\u003e\n \u003ciframe\n style={{ height }}\n ref={iframeRef}\n src=\"https://app.sigmacomputing.com/embed?:responsive_height=true\"\n /\u003e\n \u003c/\u003e\n );\n}\n```\n\n### Listeners\n\nThese are functions that can be used to listen for events from the embed, and react to them.\n\n#### useWorkbookLoaded\n\nListen for a workbook loaded event, and execute the given callback when it occurs.\n\n```typescript\nuseWorkbookLoaded(iframeRef: React.RefObject\u003cHTMLIFrameElement\u003e, onLoaded: (event: WorkbookLoadedEvent) =\u003e void)\n```\n\n#### useWorkbookError\n\nListen for a workbook error event, and execute the given callback when it occurs.\n\n```typescript\nuseWorkbookError(iframeRef: React.RefObject\u003cHTMLIFrameElement\u003e, onError: (event: WorkbookErrorEvent) =\u003e void)\n```\n\n#### useWorkbookDataLoaded\n\nListen for a workbook data loaded event, and execute the given callback when it occurs.\n\n```typescript\nuseWorkbookDataLoaded(iframeRef: React.RefObject\u003cHTMLIFrameElement\u003e, onDataLoaded: (event: WorkbookDataLoadedEvent) =\u003e void)\n```\n\n#### useVariableChange\n\nListen for a workbook variable change event, and execute the given callback when it occurs.\n\n```typescript\nuseVariableChange(iframeRef: React.RefObject\u003cHTMLIFrameElement\u003e, onVariableChange: (event: WorkbookVariableOnChangeEvent) =\u003e void)\n```\n\n#### useTableCellSelect\n\nListen for a table cell select event, and execute the given callback when it occurs.\n\n```typescript\nuseTableCellSelect(iframeRef: React.RefObject\u003cHTMLIFrameElement\u003e, onTableCellSelect: (event: WorkbookTableCellSelectEvent) =\u003e void)\n```\n\n#### useWorkbookPublished\n\nListen for a workbook published event, and execute the given callback when it occurs.\n\n```typescript\nuseWorkbookPublished(iframeRef: React.RefObject\u003cHTMLIFrameElement\u003e, onWorkbookPublished: (event: WorkbookPublishedEvent) =\u003e void)\n```\n\n#### useWorkbookFullScreen\n\nListen for a workbook full screen event, and execute the given callback when it occurs.\n\n```typescript\nuseWorkbookFullScreen(iframeRef: React.RefObject\u003cHTMLIFrameElement\u003e, onFullScreen: (event: WorkbookFullScreenEvent) =\u003e void)\n```\n\n#### useWorkbookPageHeight\n\nListen for a workbook page height event, and execute the given callback when it occurs. Needs to be used with the responsive_height [URL Parameter](https://help.sigmacomputing.com/docs/embed-url-parameters).\n\n```typescript\nuseWorkbookPageHeight(iframeRef: React.RefObject\u003cHTMLIFrameElement\u003e, onPageHeight: (event: WorkbookPageHeightEvent) =\u003e void)\n```\n\n#### useWorkbookSelectedNode\n\nListen for a workbook selected node event, and execute the given callback when it occurs.\n\n```typescript\nuseWorkbookSelectedNode(iframeRef: React.RefObject\u003cHTMLIFrameElement\u003e, onPageSelectedNode: (event: WorkbookSelectedNodeEvent) =\u003e void)\n```\n\n#### useWorkbookPivotTableCellSelect\n\nListen for a pivot table cell select event, and execute the given callback when it occurs.\n\n```typescript\nuseWorkbookPivotTableCellSelect(iframeRef: React.RefObject\u003cHTMLIFrameElement\u003e, onPivotTableCellSelect: (event: WorkbookPivotTableCellSelectEvent) =\u003e void)\n```\n\n#### useWorkbookChartValueSelect\n\nListen for a chart value select event, and execute the given callback when it occurs.\n\n```typescript\nuseWorkbookChartValueSelect(iframeRef: React.RefObject\u003cHTMLIFrameElement\u003e, onChartValueSelect: (event: WorkbookChartValueSelectEvent) =\u003e void)\n```\n\n#### useWorkbookCurrentVariables\n\nListen for a workbook current variables event, and execute the given callback when it occurs. This is to be used when `workbookVariablesList` is called.\n\n```typescript\nuseWorkbookCurrentVariables(iframeRef: React.RefObject\u003cHTMLIFrameElement\u003e, onCurrentVariables: (event: WorkbookCurrentVariablesEvent) =\u003e void)\n```\n\n#### useWorkbookBookmarkOnCreate\n\nListen for a workbook bookmark create event, and execute the given callback when it occurs.\n\n```typescript\nuseWorkbookBookmarkOnCreate(iframeRef: React.RefObject\u003cHTMLIFrameElement\u003e, onBookmarkCreate: (event: WorkbookBookmarkOnCreateEvent) =\u003e void)\n```\n\n#### useWorkbookBookmarkOnChange\n\nListen for a workbook bookmark change event, and execute the given callback when it occurs.\n\n```typescript\nuseWorkbookBookmarkOnChange(iframeRef: React.RefObject\u003cHTMLIFrameElement\u003e, onBookmarkChange: (event: WorkbookBookmarkOnChangeEvent) =\u003e void)\n```\n\n#### useWorkbookBookmarkOnUpdate\n\nListen for a workbook bookmark update event, and execute the given callback when it occurs.\n\n```typescript\nuseWorkbookBookmarkOnUpdate(iframeRef: React.RefObject\u003cHTMLIFrameElement\u003e, onBookmarkUpdate: (event: WorkbookBookmarkOnUpdateEvent) =\u003e void)\n```\n\n#### useWorkbookBookmarkOnDelete\n\nListen for a workbook bookmark delete event, and execute the given callback when it occurs.\n\n```typescript\nuseWorkbookBookmarkOnDelete(iframeRef: React.RefObject\u003cHTMLIFrameElement\u003e, onBookmarkDelete: (event: WorkbookBookmarkOnDeleteEvent) =\u003e void)\n```\n\n#### useWorkbookChartError\n\nListen for a workbook chart error event, and execute the given callback when it occurs.\n\n```typescript\nuseWorkbookChartError(iframeRef: React.RefObject\u003cHTMLIFrameElement\u003e, onChartError: (event: WorkbookChartErrorEvent) =\u003e void)\n```\n\n#### useWorkbookExploreKeyOnChange\n\nListen for a workbook explore key change event, and execute the given callback when it occurs.\n\n```typescript\nuseWorkbookExploreKeyOnChange(iframeRef: React.RefObject\u003cHTMLIFrameElement\u003e, onExploreKeyOnChange: (event: WorkbookExploreKeyOnChangeEvent) =\u003e void)\n```\n\n#### useUrlOnChange\n\nListen for a url change event, and execute the given callback when it occurs.\n\n```typescript\nuseUrlOnChange(iframeRef: React.RefObject\u003cHTMLIFrameElement\u003e, onUrlChange: (event: UrlOnChangeEvent) =\u003e void)\n```\n\n#### useWorkbookIdOnChange\n\nListen for a workbook id change event, and execute the given callback when it occurs.\n\n```typescript\nuseWorkbookIdOnChange(iframeRef: React.RefObject\u003cHTMLIFrameElement\u003e, onWorkbookIdChange: (event: WorkbookIdOnChangeEvent) =\u003e void)\n```\n\n### Mutations\n\nThese are functions that can be used to send messages to the embed. They may cause an event to be emitted from the embed.\n\n#### getWorkbookVariables\n\nSend a message to the embed to list the current variables. This will cause a `workbook:variables:current` event to be emitted from the embed, and can be used with the `useWorkbookCurrentVariables` function.\n\n```typescript\ngetWorkbookVariables(iframeRef: React.RefObject\u003cHTMLIFrameElement\u003e)\n```\n\n#### updateWorkbookVariables\n\nSend a message to the embed to update the variables.\n\n```typescript\nupdateWorkbookVariables(iframeRef: React.RefObject\u003cHTMLIFrameElement\u003e, variables: Record\u003cstring, string\u003e)\n```\n\n#### createWorkbookBookmark\n\nSend a message to the embed to create a bookmark.\n\n```typescript\ncreateWorkbookBookmark(iframeRef: React.RefObject\u003cHTMLIFrameElement\u003e, bookmark: WorkbookBookmarkCreateEvent)\n```\n\n#### updateWorkbookBookmark\n\nSend a message to the embed to update the current bookmark.\n\n```typescript\nupdateWorkbookBookmark(iframeRef: React.RefObject\u003cHTMLIFrameElement\u003e)\n```\n\n#### deleteWorkbookBookmark\n\nSend a message to the embed to delete the given bookmark.\n\n```typescript\ndeleteWorkbookBookmark(iframeRef: React.RefObject\u003cHTMLIFrameElement\u003e, bookmarkId: string)\n```\n\n#### selectWorkbookBookmark\n\nSend a message to the embed to select the given bookmark. If no bookmarkId is provided, the current bookmark will be deselected.\n\n```typescript\nselectWorkbookBookmark(iframeRef: React.RefObject\u003cHTMLIFrameElement\u003e, bookmarkId?: string)\n```\n\n#### updateWorkbookFullscreen\n\nSend a message to the embed to toggle the fullscreen state of the given element.\n\n```typescript\nupdateWorkbookFullscreen(iframeRef: React.RefObject\u003cHTMLIFrameElement\u003e, nodeId: string | null)\n```\n\n#### updateWorkbookSelectedNodeId\n\nSend a message to the embed to update the selected element. Can be a pageId or elementId.\n\n```typescript\nupdateWorkbookSelectedNodeId(iframeRef: React.RefObject\u003cHTMLIFrameElement\u003e, nodeId: string, nodeType: \"element\" | \"page\")\n```\n\n#### updateWorkbookSharingLink\n\nSend a message to the embed to update the sharing link.\n\n```typescript\nupdateWorkbookSharingLink(iframeRef: React.RefObject\u003cHTMLIFrameElement\u003e, sharingLink: string | null, sharingExplorationLink?: string | null)\n```\n"])</script><script>self.__next_f.push([1,"1c:[\"$\",\"$L1e\",null,{\"defaultValue\":\"readme\",\"className\":\"w-full\",\"children\":[[\"$\",\"$L1f\",null,{\"children\":[[\"$\",\"$L20\",null,{\"value\":\"readme\",\"children\":\"Readme\"}],[\"$\",\"$L20\",null,{\"value\":\"dependencies\",\"children\":[\"Dependencies\",[\"$\",\"span\",null,{\"className\":\"ml-1.5 text-xs text-muted-foreground\",\"children\":[\"(\",1,\")\"]}]]}],[\"$\",\"$L20\",null,{\"value\":\"versions\",\"children\":[\"Versions\",[\"$\",\"span\",null,{\"className\":\"ml-1.5 text-xs text-muted-foreground\",\"children\":[\"(\",22,\")\"]}]]}]]}],[\"$\",\"$L21\",null,{\"value\":\"readme\",\"className\":\"mt-6\",\"children\":[\"$\",\"$L22\",null,{\"readme\":\"$23\"}]}],\"$L24\",\"$L25\"]}]\n"])</script><script>self.__next_f.push([1,"28:I[7860,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"VersionList\"]\n"])</script><script>self.__next_f.push([1,"24:[\"$\",\"$L21\",null,{\"value\":\"dependencies\",\"className\":\"mt-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-6 lg:grid-cols-2\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card\",\"className\":\"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm py-4\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card-header\",\"className\":\"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 pb-2\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card-title\",\"className\":\"font-semibold flex items-center gap-2 text-base\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-package h-4 w-4\",\"children\":[[\"$\",\"path\",\"1a0edw\",{\"d\":\"M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z\"}],[\"$\",\"path\",\"d0xqtd\",{\"d\":\"M12 22V12\"}],[\"$\",\"path\",\"yx3hmr\",{\"d\":\"m3.3 7 7.703 4.734a2 2 0 0 0 1.994 0L20.7 7\"}],[\"$\",\"path\",\"1c824w\",{\"d\":\"m7.5 4.27 9 5.15\"}],\"$undefined\"]}],\"Dependencies\",[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 ml-auto text-xs\",\"children\":1}]]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1\",\"children\":[[\"$\",\"$L5\",\"@sigmacomputing/embed-sdk\",{\"href\":\"/package/%40sigmacomputing%2Fembed-sdk\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@sigmacomputing/embed-sdk\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"0.7.0\"}]]}]]}]}]]}],[\"$\",\"div\",null,{\"data-slot\":\"card\",\"className\":\"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm py-4\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card-header\",\"className\":\"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 pb-2\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card-title\",\"className\":\"font-semibold flex items-center gap-2 text-base\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-users h-4 w-4\",\"children\":[[\"$\",\"path\",\"1yyitq\",{\"d\":\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"}],[\"$\",\"circle\",\"nufk8\",{\"cx\":\"9\",\"cy\":\"7\",\"r\":\"4\"}],[\"$\",\"path\",\"kshegd\",{\"d\":\"M22 21v-2a4 4 0 0 0-3-3.87\"}],[\"$\",\"path\",\"1da9ce\",{\"d\":\"M16 3.13a4 4 0 0 1 0 7.75\"}],\"$undefined\"]}],\"Peer Dependencies\",[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 ml-auto text-xs\",\"children\":2}]]}]}],\"$L26\"]}],\"$L27\"]}]}]\n"])</script><script>self.__next_f.push([1,"25:[\"$\",\"$L21\",null,{\"value\":\"versions\",\"className\":\"mt-6\",\"children\":[\"$\",\"$L28\",null,{\"packageName\":\"@sigmacomputing/react-embed-sdk\",\"versions\":[{\"version\":\"0.7.0\",\"date\":\"2025-02-19T00:12:04.811Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.6.0\",\"date\":\"2025-01-28T22:06:23.688Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.5.2\",\"date\":\"2024-10-29T22:22:41.297Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.5.1\",\"date\":\"2024-10-28T18:50:06.771Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.5.0\",\"date\":\"2024-09-24T17:33:36.617Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.4.0\",\"date\":\"2024-09-18T18:51:10.003Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.3.3\",\"date\":\"2024-09-13T21:46:18.859Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.3.2\",\"date\":\"2024-08-06T18:04:38.678Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.3.1\",\"date\":\"2024-08-01T21:38:08.015Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.3.0\",\"date\":\"2024-08-01T19:45:23.129Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.2.11\",\"date\":\"2024-07-29T20:04:57.106Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.2.10\",\"date\":\"2024-07-12T17:14:18.934Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.2.8\",\"date\":\"2024-06-12T16:58:40.132Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.2.7\",\"date\":\"2024-06-12T16:44:51.284Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.2.6\",\"date\":\"2024-06-12T16:37:50.845Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.2.5\",\"date\":\"2024-06-11T23:20:29.255Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.2.4\",\"date\":\"2024-06-10T18:11:04.852Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.2.3\",\"date\":\"2024-06-06T21:50:09.977Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.2.2\",\"date\":\"2024-06-04T18:33:19.836Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.2.1\",\"date\":\"2024-05-23T18:44:36.066Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.2.0\",\"date\":\"2024-03-17T01:09:58.840Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.1.0\",\"date\":\"2024-03-17T00:59:54.107Z\",\"deprecated\":\"$undefined\"}],\"currentVersion\":\"0.7.0\"}]}]\n"])</script><div style="display:none" id="S:1"><div class="space-y-8"><div class="flex flex-col gap-6 lg:flex-row lg:gap-8"><div class="flex-1 space-y-4"><div class="flex flex-wrap items-start gap-3"><h1 class="font-mono text-2xl font-bold sm:text-3xl">@sigmacomputing/react-embed-sdk</h1><div class="flex flex-wrap items-center gap-2"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 font-mono">v0.7.0</span><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-blue-600 border-blue-200"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-code mr-1 h-3 w-3"><path d="M10 12.5 8 15l2 2.5"></path><path d="m14 12.5 2 2.5-2 2.5"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z"></path></svg>TypeScript</span></div></div><p class="text-lg text-muted-foreground">React JavaScript SDK to interact with Sigma Computing's Embed API</p><div class="flex flex-wrap gap-1.5"><a href="/search?q=embed"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-xs font-normal hover:bg-accent">embed</span></a><a href="/search?q=sdk"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-xs font-normal hover:bg-accent">sdk</span></a><a href="/search?q=sigma"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-xs font-normal hover:bg-accent">sigma</span></a><a href="/search?q=react"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-xs font-normal hover:bg-accent">react</span></a></div><div class="flex flex-wrap gap-4 text-sm text-muted-foreground"><span class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download h-4 w-4"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" x2="12" y1="15" y2="3"></line></svg><span class="font-medium text-foreground">9.8K</span>/week</span><span class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-4 w-4"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>Updated 2 days ago</span><span class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-scale h-4 w-4"><path d="m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"></path><path d="m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"></path><path d="M7 21h10"></path><path d="M12 3v18"></path><path d="M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2"></path></svg>MIT</span><span class="flex items-center gap-1.5">Unpacked: 67.0 KB</span></div><div class="text-sm"><span class="text-muted-foreground">Published by </span><a class="font-medium hover:underline" href="/~sigmacomputing">sigmacomputing</a></div></div><div class="w-full space-y-4 lg:w-80"><div class="rounded-lg border bg-card"><div dir="ltr" data-orientation="horizontal" data-slot="tabs" class="flex flex-col gap-2"><div role="tablist" aria-orientation="horizontal" data-slot="tabs-list" class="text-muted-foreground inline-flex h-9 items-center w-full justify-start rounded-none border-b bg-transparent p-0" tabindex="-1" data-orientation="horizontal" style="outline:none"><button type="button" role="tab" aria-selected="true" aria-controls="radix-_R_36av5ubrb_-content-npm" data-state="active" id="radix-_R_36av5ubrb_-trigger-npm" data-slot="tabs-trigger" class="dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 border px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">npm</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_36av5ubrb_-content-yarn" data-state="inactive" id="radix-_R_36av5ubrb_-trigger-yarn" data-slot="tabs-trigger" class="dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 border px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">yarn</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_36av5ubrb_-content-pnpm" data-state="inactive" id="radix-_R_36av5ubrb_-trigger-pnpm" data-slot="tabs-trigger" class="dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 border px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">pnpm</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_36av5ubrb_-content-bun" data-state="inactive" id="radix-_R_36av5ubrb_-trigger-bun" data-slot="tabs-trigger" class="dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 border px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">bun</button></div><div data-state="active" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_36av5ubrb_-trigger-npm" id="radix-_R_36av5ubrb_-content-npm" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-0" style="animation-duration:0s"><div class="flex items-center justify-between gap-2 p-3"><code class="flex-1 overflow-x-auto whitespace-nowrap font-mono text-sm">npm install @sigmacomputing/react-embed-sdk</code><button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 size-9 h-8 w-8 shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy h-4 w-4"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button></div></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_36av5ubrb_-trigger-yarn" hidden="" id="radix-_R_36av5ubrb_-content-yarn" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-0"></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_36av5ubrb_-trigger-pnpm" hidden="" id="radix-_R_36av5ubrb_-content-pnpm" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-0"></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_36av5ubrb_-trigger-bun" hidden="" id="radix-_R_36av5ubrb_-content-bun" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-0"></div></div></div><div class="flex flex-wrap gap-2"><a href="https://github.com/sigmacomputing/embed-sdk" target="_blank" rel="noopener noreferrer" data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-github mr-1.5 h-4 w-4"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path><path d="M9 18c-4.51 2-5-2-7-2"></path></svg>Repository</a><a href="https://sigmacomputing.com" target="_blank" rel="noopener noreferrer" data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house mr-1.5 h-4 w-4"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg>Homepage</a><a href="https://npmjs.com/package/@sigmacomputing/react-embed-sdk" target="_blank" rel="noopener noreferrer" data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link mr-1.5 h-4 w-4"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg>npm</a></div></div></div><div dir="ltr" data-orientation="horizontal" data-slot="tabs" class="flex flex-col gap-2 w-full"><div role="tablist" aria-orientation="horizontal" data-slot="tabs-list" class="bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]" tabindex="-1" data-orientation="horizontal" style="outline:none"><button type="button" role="tab" aria-selected="true" aria-controls="radix-_R_aav5ubrb_-content-readme" data-state="active" id="radix-_R_aav5ubrb_-trigger-readme" data-slot="tabs-trigger" class="data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Readme</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_aav5ubrb_-content-dependencies" data-state="inactive" id="radix-_R_aav5ubrb_-trigger-dependencies" data-slot="tabs-trigger" class="data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Dependencies<span class="ml-1.5 text-xs text-muted-foreground">(1)</span></button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_aav5ubrb_-content-versions" data-state="inactive" id="radix-_R_aav5ubrb_-trigger-versions" data-slot="tabs-trigger" class="data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Versions<span class="ml-1.5 text-xs text-muted-foreground">(22)</span></button></div><div data-state="active" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-readme" id="radix-_R_aav5ubrb_-content-readme" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6" style="animation-duration:0s"><div class="relative"><div class="prose prose-sm dark:prose-invert max-w-none overflow-hidden rounded-lg border p-6" style="max-height:500px"><p><h2 class="text-xl font-semibold mt-5 mb-3">Getting Started</h2></p><p class="my-3">To use the react-embed-sdk in your project, you can install it using your node package manager.</p><p class="my-3"><strong>Using npm:</strong></p><p class="my-3">``<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">code<br />npm install @sigmacomputing/react-embed-sdk<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><strong>yarn:</strong></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">code<br />yarn add @sigmacomputing/react-embed-sdk<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><strong>pnpm:</strong></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">code<br />pnpm add @sigmacomputing/react-embed-sdk<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Documentation</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">The library provides hooks that combine the lower level <a href="#listeners" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">listeners</a> and <a href="#mutations" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">mutations</a> to provide a more ergonomic API.</p><p class="my-3">#### useSigmaIframe</p><p class="my-3">A hook that returns a ref to be used with a Sigma iframe element, and the loading and error state of the embed.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />useSigmaIframe(): {<br /> iframeRef: React.RefObject<HTMLIFrameElement>;<br /> loading: boolean;<br /> error: WorkbookErrorEvent | null;<br /> variables: Record<string, string> | undefined;<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Example usage:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />function MyEmbed() {<br /> const { iframeRef, loading, error } = useSigmaIframe();<br /> return (<br /> <><br /> {loading && <p>Loading...</p>}<br /> {error && <p>Error: {error.message}</p>}<br /> <iframe<br /> className={loading || error ? "hidden" : "show"}<br /> ref={iframeRef}<br /> {/<em> The embed url to load </em>/}<br /> src="https://app.sigmacomputing.com/embed"<br /> /><br /> </><br /> );<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### useWorkbookVariables</p><p class="my-3">A hook that returns functions to get and set the variables in a workbook.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />useWorkbookVariables(iframeRef: React.RefObject<HTMLIFrameElement>): {<br /> getVariables: () => Promise<Record<string, string>>;<br /> setVariables: (variables: Record<string, string>) => void;<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Example usage:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />function MyEmbed() {<br /> const { getVariables, setVariables } = useWorkbookVariables(iframeRef);<br /> return (<br /> <><br /> <button onClick={() => setVariables({ foo: "bar" }))} name="set-variables">Set Filters</button><br /> <button<br /> onClick={async () => {<br /> const variable = await getVariables();<br /> }}<br /> name="get-variables"<br /> ><br /> Get Filters<br /> </button><br /> <iframe ref={iframeRef} src="https://app.sigmacomputing.com/embed" /><br /> </><br /> );<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### usePageHeight</p><p class="my-3">A hook that returns the height of the page in the iframe. This HAS to be used with the responsive_height <a href="https://help.sigmacomputing.com/docs/embed-url-parameters" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">URL Parameter</a>.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />usePageHeight(iframeRef: React.RefObject<HTMLIFrameElement>): number | undefined<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Example usage:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />function MyEmbed() {<br /> const { iframeRef } = useSigmaIframe();<br /> const height = usePageHeight(iframeRef);<br /> return (<br /> <><br /> <iframe<br /> style={{ height }}<br /> ref={iframeRef}<br /> src="https://app.sigmacomputing.com/embed?:responsive_height=true"<br /> /><br /> </><br /> );<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">These are functions that can be used to listen for events from the embed, and react to them.</p><p class="my-3">#### useWorkbookLoaded</p><p class="my-3">Listen for a workbook loaded event, and execute the given callback when it occurs.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />useWorkbookLoaded(iframeRef: React.RefObject<HTMLIFrameElement>, onLoaded: (event: WorkbookLoadedEvent) => void)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### useWorkbookError</p><p class="my-3">Listen for a workbook error event, and execute the given callback when it occurs.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />useWorkbookError(iframeRef: React.RefObject<HTMLIFrameElement>, onError: (event: WorkbookErrorEvent) => void)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### useWorkbookDataLoaded</p><p class="my-3">Listen for a workbook data loaded event, and execute the given callback when it occurs.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />useWorkbookDataLoaded(iframeRef: React.RefObject<HTMLIFrameElement>, onDataLoaded: (event: WorkbookDataLoadedEvent) => void)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### useVariableChange</p><p class="my-3">Listen for a workbook variable change event, and execute the given callback when it occurs.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />useVariableChange(iframeRef: React.RefObject<HTMLIFrameElement>, onVariableChange: (event: WorkbookVariableOnChangeEvent) => void)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### useTableCellSelect</p><p class="my-3">Listen for a table cell select event, and execute the given callback when it occurs.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />useTableCellSelect(iframeRef: React.RefObject<HTMLIFrameElement>, onTableCellSelect: (event: WorkbookTableCellSelectEvent) => void)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### useWorkbookPublished</p><p class="my-3">Listen for a workbook published event, and execute the given callback when it occurs.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />useWorkbookPublished(iframeRef: React.RefObject<HTMLIFrameElement>, onWorkbookPublished: (event: WorkbookPublishedEvent) => void)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### useWorkbookFullScreen</p><p class="my-3">Listen for a workbook full screen event, and execute the given callback when it occurs.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />useWorkbookFullScreen(iframeRef: React.RefObject<HTMLIFrameElement>, onFullScreen: (event: WorkbookFullScreenEvent) => void)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### useWorkbookPageHeight</p><p class="my-3">Listen for a workbook page height event, and execute the given callback when it occurs. Needs to be used with the responsive_height <a href="https://help.sigmacomputing.com/docs/embed-url-parameters" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">URL Parameter</a>.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />useWorkbookPageHeight(iframeRef: React.RefObject<HTMLIFrameElement>, onPageHeight: (event: WorkbookPageHeightEvent) => void)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### useWorkbookSelectedNode</p><p class="my-3">Listen for a workbook selected node event, and execute the given callback when it occurs.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />useWorkbookSelectedNode(iframeRef: React.RefObject<HTMLIFrameElement>, onPageSelectedNode: (event: WorkbookSelectedNodeEvent) => void)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### useWorkbookPivotTableCellSelect</p><p class="my-3">Listen for a pivot table cell select event, and execute the given callback when it occurs.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />useWorkbookPivotTableCellSelect(iframeRef: React.RefObject<HTMLIFrameElement>, onPivotTableCellSelect: (event: WorkbookPivotTableCellSelectEvent) => void)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### useWorkbookChartValueSelect</p><p class="my-3">Listen for a chart value select event, and execute the given callback when it occurs.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />useWorkbookChartValueSelect(iframeRef: React.RefObject<HTMLIFrameElement>, onChartValueSelect: (event: WorkbookChartValueSelectEvent) => void)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### useWorkbookCurrentVariables</p><p class="my-3">Listen for a workbook current variables event, and execute the given callback when it occurs. This is to be used when </code>workbookVariablesList<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is called.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />useWorkbookCurrentVariables(iframeRef: React.RefObject<HTMLIFrameElement>, onCurrentVariables: (event: WorkbookCurrentVariablesEvent) => void)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### useWorkbookBookmarkOnCreate</p><p class="my-3">Listen for a workbook bookmark create event, and execute the given callback when it occurs.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />useWorkbookBookmarkOnCreate(iframeRef: React.RefObject<HTMLIFrameElement>, onBookmarkCreate: (event: WorkbookBookmarkOnCreateEvent) => void)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### useWorkbookBookmarkOnChange</p><p class="my-3">Listen for a workbook bookmark change event, and execute the given callback when it occurs.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />useWorkbookBookmarkOnChange(iframeRef: React.RefObject<HTMLIFrameElement>, onBookmarkChange: (event: WorkbookBookmarkOnChangeEvent) => void)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### useWorkbookBookmarkOnUpdate</p><p class="my-3">Listen for a workbook bookmark update event, and execute the given callback when it occurs.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />useWorkbookBookmarkOnUpdate(iframeRef: React.RefObject<HTMLIFrameElement>, onBookmarkUpdate: (event: WorkbookBookmarkOnUpdateEvent) => void)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### useWorkbookBookmarkOnDelete</p><p class="my-3">Listen for a workbook bookmark delete event, and execute the given callback when it occurs.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />useWorkbookBookmarkOnDelete(iframeRef: React.RefObject<HTMLIFrameElement>, onBookmarkDelete: (event: WorkbookBookmarkOnDeleteEvent) => void)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### useWorkbookChartError</p><p class="my-3">Listen for a workbook chart error event, and execute the given callback when it occurs.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />useWorkbookChartError(iframeRef: React.RefObject<HTMLIFrameElement>, onChartError: (event: WorkbookChartErrorEvent) => void)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### useWorkbookExploreKeyOnChange</p><p class="my-3">Listen for a workbook explore key change event, and execute the given callback when it occurs.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />useWorkbookExploreKeyOnChange(iframeRef: React.RefObject<HTMLIFrameElement>, onExploreKeyOnChange: (event: WorkbookExploreKeyOnChangeEvent) => void)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### useUrlOnChange</p><p class="my-3">Listen for a url change event, and execute the given callback when it occurs.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />useUrlOnChange(iframeRef: React.RefObject<HTMLIFrameElement>, onUrlChange: (event: UrlOnChangeEvent) => void)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### useWorkbookIdOnChange</p><p class="my-3">Listen for a workbook id change event, and execute the given callback when it occurs.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />useWorkbookIdOnChange(iframeRef: React.RefObject<HTMLIFrameElement>, onWorkbookIdChange: (event: WorkbookIdOnChangeEvent) => void)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">These are functions that can be used to send messages to the embed. They may cause an event to be emitted from the embed.</p><p class="my-3">#### getWorkbookVariables</p><p class="my-3">Send a message to the embed to list the current variables. This will cause a </code>workbook:variables:current<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> event to be emitted from the embed, and can be used with the </code>useWorkbookCurrentVariables<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> function.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />getWorkbookVariables(iframeRef: React.RefObject<HTMLIFrameElement>)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### updateWorkbookVariables</p><p class="my-3">Send a message to the embed to update the variables.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />updateWorkbookVariables(iframeRef: React.RefObject<HTMLIFrameElement>, variables: Record<string, string>)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### createWorkbookBookmark</p><p class="my-3">Send a message to the embed to create a bookmark.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />createWorkbookBookmark(iframeRef: React.RefObject<HTMLIFrameElement>, bookmark: WorkbookBookmarkCreateEvent)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### updateWorkbookBookmark</p><p class="my-3">Send a message to the embed to update the current bookmark.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />updateWorkbookBookmark(iframeRef: React.RefObject<HTMLIFrameElement>)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### deleteWorkbookBookmark</p><p class="my-3">Send a message to the embed to delete the given bookmark.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />deleteWorkbookBookmark(iframeRef: React.RefObject<HTMLIFrameElement>, bookmarkId: string)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### selectWorkbookBookmark</p><p class="my-3">Send a message to the embed to select the given bookmark. If no bookmarkId is provided, the current bookmark will be deselected.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />selectWorkbookBookmark(iframeRef: React.RefObject<HTMLIFrameElement>, bookmarkId?: string)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### updateWorkbookFullscreen</p><p class="my-3">Send a message to the embed to toggle the fullscreen state of the given element.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />updateWorkbookFullscreen(iframeRef: React.RefObject<HTMLIFrameElement>, nodeId: string | null)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### updateWorkbookSelectedNodeId</p><p class="my-3">Send a message to the embed to update the selected element. Can be a pageId or elementId.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />updateWorkbookSelectedNodeId(iframeRef: React.RefObject<HTMLIFrameElement>, nodeId: string, nodeType: "element" | "page")<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### updateWorkbookSharingLink</p><p class="my-3">Send a message to the embed to update the sharing link.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br />updateWorkbookSharingLink(iframeRef: React.RefObject<HTMLIFrameElement>, sharingLink: string | null, sharingExplorationLink?: string | null)<br /></code>``<br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><script>self.__next_f.push([1,"26:[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1\",\"children\":[[\"$\",\"$L5\",\"react\",{\"href\":\"/package/react\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^16.8.0 || ^17.0 || ^18.0 || ^19.0 || 19.0.0-rc\"}]]}],[\"$\",\"$L5\",\"react-dom\",{\"href\":\"/package/react-dom\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react-dom\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^16.8.0 || ^17.0 || ^18.0 || ^19.0 || 19.0.0-rc\"}]]}]]}]}]\n"])</script><script>self.__next_f.push([1,"27:[\"$\",\"div\",null,{\"data-slot\":\"card\",\"className\":\"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm py-4 lg:col-span-2\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card-header\",\"className\":\"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 pb-2\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card-title\",\"className\":\"font-semibold flex items-center gap-2 text-base\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-wrench h-4 w-4\",\"children\":[[\"$\",\"path\",\"cbrjhi\",{\"d\":\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"}],\"$undefined\"]}],\"Dev Dependencies\",[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 ml-auto text-xs\",\"children\":5}]]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1 sm:grid-cols-2 lg:grid-cols-3\",\"children\":[[\"$\",\"$L5\",\"@sigmacomputing/eslint-config\",{\"href\":\"/package/%40sigmacomputing%2Feslint-config\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@sigmacomputing/eslint-config\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"0.0.0\"}]]}],[\"$\",\"$L5\",\"@sigmacomputing/typescript-config\",{\"href\":\"/package/%40sigmacomputing%2Ftypescript-config\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@sigmacomputing/typescript-config\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"0.0.0\"}]]}],[\"$\",\"$L5\",\"@types/react\",{\"href\":\"/package/%40types%2Freact\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[\"$L29\",\"$undefined\"]}],\"@types/react\"]}],\"$L2a\"]}],\"$L2b\",\"$L2c\"]}]}]]}]\n"])</script><script>self.__next_f.push([1,"29:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n2a:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^18.3.18\"}]\n2b:[\"$\",\"$L5\",\"react\",{\"href\":\"/package/react\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^18.3.1\"}]]}]\n2c:[\"$\",\"$L5\",\"react-dom\",{\"href\":\"/package/react-dom\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react-dom\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^18.3.1\"}]]}]\n"])</script><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>