@sigmacomputing/react-embed-sdk
v0.5.2
Published
React JavaScript SDK to interact with Sigma Computing's Embed API
Downloads
350
Maintainers
Readme
Getting Started
To use the react-embed-sdk in your project, you can install it using your node package manager.
Using npm:
npm install @sigmacomputing/react-embed-sdk
yarn:
yarn add @sigmacomputing/react-embed-sdk
pnpm:
pnpm add @sigmacomputing/react-embed-sdk
Documentation
Hooks
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.
useSigmaIframe(): {
iframeRef: React.RefObject<HTMLIFrameElement>;
loading: boolean;
error: WorkbookErrorEvent | null;
variables: Record<string, string> | undefined;
}
Example usage:
function MyEmbed() {
const { iframeRef, loading, error } = useSigmaIframe();
return (
<>
{loading && <p>Loading...</p>}
{error && <p>Error: {error.message}</p>}
<iframe
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.
useWorkbookVariables(iframeRef: React.RefObject<HTMLIFrameElement>): {
getVariables: () => Promise<Record<string, string>>;
setVariables: (variables: Record<string, string>) => void;
}
Example usage:
function MyEmbed() {
const { getVariables, setVariables } = useWorkbookVariables(iframeRef);
return (
<>
<button onClick={() => setVariables({ foo: "bar" }))} name="set-variables">Set Filters</button>
<button
onClick={async () => {
const variable = await getVariables();
}}
name="get-variables"
>
Get Filters
</button>
<iframe ref={iframeRef} src="https://app.sigmacomputing.com/embed" />
</>
);
}
usePageHeight
A hook that returns the height of the page in the iframe. This HAS to be used with the responsive_height URL Parameter.
usePageHeight(iframeRef: React.RefObject<HTMLIFrameElement>): number | undefined
Example usage:
function MyEmbed() {
const { iframeRef } = useSigmaIframe();
const height = usePageHeight(iframeRef);
return (
<>
<iframe
style={{ height }}
ref={iframeRef}
src="https://app.sigmacomputing.com/embed?:responsive_height=true"
/>
</>
);
}
Listeners
These are functions that can be used to listen for events from the embed, and react to them.
useWorkbookLoaded
Listen for a workbook loaded event, and execute the given callback when it occurs.
useWorkbookLoaded(iframeRef: React.RefObject<HTMLIFrameElement>, onLoaded: (event: WorkbookLoadedEvent) => void)
useWorkbookError
Listen for a workbook error event, and execute the given callback when it occurs.
useWorkbookError(iframeRef: React.RefObject<HTMLIFrameElement>, onError: (event: WorkbookErrorEvent) => void)
useWorkbookDataLoaded
Listen for a workbook data loaded event, and execute the given callback when it occurs.
useWorkbookDataLoaded(iframeRef: React.RefObject<HTMLIFrameElement>, onDataLoaded: (event: WorkbookDataLoadedEvent) => void)
useVariableChange
Listen for a workbook variable change event, and execute the given callback when it occurs.
useVariableChange(iframeRef: React.RefObject<HTMLIFrameElement>, onVariableChange: (event: WorkbookVariableOnChangeEvent) => void)
useTableCellSelect
Listen for a table cell select event, and execute the given callback when it occurs.
useTableCellSelect(iframeRef: React.RefObject<HTMLIFrameElement>, onTableCellSelect: (event: WorkbookTableCellSelectEvent) => void)
useWorkbookPublished
Listen for a workbook published event, and execute the given callback when it occurs.
useWorkbookPublished(iframeRef: React.RefObject<HTMLIFrameElement>, onWorkbookPublished: (event: WorkbookPublishedEvent) => void)
useWorkbookFullScreen
Listen for a workbook full screen event, and execute the given callback when it occurs.
useWorkbookFullScreen(iframeRef: React.RefObject<HTMLIFrameElement>, onFullScreen: (event: WorkbookFullScreenEvent) => void)
useWorkbookPageHeight
Listen for a workbook page height event, and execute the given callback when it occurs. Needs to be used with the responsive_height URL Parameter.
useWorkbookPageHeight(iframeRef: React.RefObject<HTMLIFrameElement>, onPageHeight: (event: WorkbookPageHeightEvent) => void)
useWorkbookSelectedNode
Listen for a workbook selected node event, and execute the given callback when it occurs.
useWorkbookSelectedNode(iframeRef: React.RefObject<HTMLIFrameElement>, onPageSelectedNode: (event: WorkbookSelectedNodeEvent) => void)
useWorkbookPivotTableCellSelect
Listen for a pivot table cell select event, and execute the given callback when it occurs.
useWorkbookPivotTableCellSelect(iframeRef: React.RefObject<HTMLIFrameElement>, onPivotTableCellSelect: (event: WorkbookPivotTableCellSelectEvent) => void)
useWorkbookChartValueSelect
Listen for a chart value select event, and execute the given callback when it occurs.
useWorkbookChartValueSelect(iframeRef: React.RefObject<HTMLIFrameElement>, onChartValueSelect: (event: WorkbookChartValueSelectEvent) => void)
useWorkbookCurrentVariables
Listen for a workbook current variables event, and execute the given callback when it occurs. This is to be used when workbookVariablesList
is called.
useWorkbookCurrentVariables(iframeRef: React.RefObject<HTMLIFrameElement>, onCurrentVariables: (event: WorkbookCurrentVariablesEvent) => void)
useWorkbookBookmarkOnCreate
Listen for a workbook bookmark create event, and execute the given callback when it occurs.
useWorkbookBookmarkOnCreate(iframeRef: React.RefObject<HTMLIFrameElement>, onBookmarkCreate: (event: WorkbookBookmarkOnCreateEvent) => void)
useWorkbookChartError
Listen for a workbook chart error event, and execute the given callback when it occurs.
useWorkbookChartError(iframeRef: React.RefObject<HTMLIFrameElement>, onChartError: (event: WorkbookChartErrorEvent) => void)
useWorkbookExploreKeyOnChange
Listen for a workbook explore key change event, and execute the given callback when it occurs.
useWorkbookExploreKeyOnChange(iframeRef: React.RefObject<HTMLIFrameElement>, onExploreKeyOnChange: (event: WorkbookExploreKeyOnChangeEvent) => void)
useWorkbookBookmarkOnChange
Listen for a workbook bookmark change event, and execute the given callback when it occurs.
useWorkbookBookmarkOnChange(iframeRef: React.RefObject<HTMLIFrameElement>, onBookmarkChange: (event: WorkbookBookmarkOnChangeEvent) => void)
useUrlOnChange
Listen for a url change event, and execute the given callback when it occurs.
useUrlOnChange(iframeRef: React.RefObject<HTMLIFrameElement>, onUrlChange: (event: UrlOnChangeEvent) => void)
useWorkbookIdOnChange
Listen for a workbook id change event, and execute the given callback when it occurs.
useWorkbookIdOnChange(iframeRef: React.RefObject<HTMLIFrameElement>, onWorkbookIdChange: (event: WorkbookIdOnChangeEvent) => void)
Mutations
These are functions that can be used to send messages to the embed. They may cause an event to be emitted from the embed.
getWorkbookVariables
Send 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.
getWorkbookVariables(iframeRef: React.RefObject<HTMLIFrameElement>)
updateWorkbookVariables
Send a message to the embed to update the variables.
updateWorkbookVariables(iframeRef: React.RefObject<HTMLIFrameElement>, variables: Record<string, string>)
createWorkbookBookmark
Send a message to the embed to create a bookmark.
createWorkbookBookmark(iframeRef: React.RefObject<HTMLIFrameElement>, bookmark: WorkbookBookmarkCreateEvent)
updateWorkbookBookmark
Send a message to the embed to update the current bookmark.
updateWorkbookBookmark(iframeRef: React.RefObject<HTMLIFrameElement>)
updateWorkbookFullscreen
Send a message to the embed to toggle the fullscreen state of the given element.
updateWorkbookFullscreen(iframeRef: React.RefObject<HTMLIFrameElement>, nodeId: string | null)
updateWorkbookSelectedNodeId
Send a message to the embed to update the selected element. Can be a pageId or elementId.
updateWorkbookSelectedNodeId(iframeRef: React.RefObject<HTMLIFrameElement>, nodeId: string, nodeType: "element" | "page")
updateWorkbookSharingLink
Send a message to the embed to update the sharing link.
updateWorkbookSharingLink(iframeRef: React.RefObject<HTMLIFrameElement>, sharingLink: string | null, sharingExplorationLink?: string | null)