React Typescript Component for Embedding Sisense Dashboards

To embed dashboards from Sisense into your web application, typically you would use either the IFRAME or EmbedSDK approaches (see sisense.dev for more details).

If your application is written in React, then React components to achieve tasks, like this, make life easier.

You can always write your own components around Sisense SDKs and APIs, but here is one I wrote that you can use to get started.

Example Application

To see the component working in a live sample application, simply visit this link and enter your Sisense URL and dashboard ID into the relevant input boxes.

To download the source of this example application, clone this repo and follow the instructions on the readme page.

Use the React Component in Your Application

To see more details on how to use the React Component for Sisense Embed SDK in your application, visit the repo for the component and follow the instructions on the read me.

At the time of writing this article, here is all you should need to do:

Install module using npm

npm install --save sisensers/sisense-embedsdk-react

Import the module into your React application

import SisenseDashboardEmbed from 'sisense-embedsdk-react'

Use the `SisenseDashboardEmbed` component on your page

<SisenseDashboardEmbed
  sisenseUrl={sisenseUrl}
  dashboardId={dashboardId}
/>

The component accepts a number of other optional 'props', including Booleans, to control the dashboard settings (toolbar, left pane, right pane), volatile mode (don't save changes to dashboard state), as well as strings for the look and feel theme, css height/width for rendered frame etc.

Also, you can control if things like EmbedSDK should be unloaded when the component unmounts through the props, as well as attach your own handler to execute when the dashboard has loaded.

I hope this helps some of you get started with using Sisense in React! Leave a comment if you use my example and share your experience.

Updated 02-15-2024