Skip to content

Instantly share code, notes, and snippets.

@joshatxantie
Created June 7, 2023 22:23
Show Gist options
  • Save joshatxantie/10ca9766927e3cc3547fe2778af40403 to your computer and use it in GitHub Desktop.
Save joshatxantie/10ca9766927e3cc3547fe2778af40403 to your computer and use it in GitHub Desktop.
React PowerBI Embed Component
// Required Packages:
// npm install --save powerbi-client powerbi-client-react
import React, {useEffect, useState} from 'react'
import { PowerBIEmbed } from 'powerbi-client-react';
import { models } from "powerbi-client";
declare const BackendAPI: any;
type EmbedConfigResponse = {
reportId: string;
embedUrl: string;
accessToken: string;
} | null;
type Props = {}
export default function EmbedComponent({}: Props) {
const [embedConfig, setEmbedConfig] = useState<any>();
useEffect(() => {
// Get embed config from a backend api
const backendAPI = new BackendAPI();
backendAPI
.getEmbed()
.then((res: EmbedConfigResponse) => {
if (res) {
setEmbedConfig({reportId: res.reportId, embedUrl: res.embedUrl, accessToken: res.accessToken});
}
})
.catch((err) => {
console.log(err);
});
}, [])
const getReportConfig = ({ reportId, embedUrl, accessToken }) => {
return {
type: "report", // Supported types: report, dashboard, tile, visual and qna
id: reportId,
embedUrl,
accessToken: accessToken,
tokenType: models.TokenType.Embed,
settings: {
panes: {
filters: {
expanded: false,
visible: false,
},
},
background: models.BackgroundType.Transparent,
},
};
};
return (<>
{embedConfig ? (<PowerBIEmbed embedConfig={getReportConfig(embedConfig)}/>) : "Loading..."}
</>)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment