We’re thrilled to announce the release of Power BI component for React. React is a popular open-source JavaScript library – many of you asked for an easier integration between Power BI and React web applications.

The new React component supports both JavaScript and TypeScript and will help you embed your analytics in a React web application. Using the React component you can now get up and running quickly with embedded analytics in your application.

The library for React lets you embed Power BI reports, dashboards, dashboard tiles, report visuals or Q&A. It helps you optimize performance, with the bootstrap integration, and use all the client side APIs including report authoring. In addition, it simplifies the Power BI embed lifecycle management in React applications.

The Power BI React component is now live on NPM and open sourced on GitHub.

For a quick peek into how to implement it in your application, check out the example below.

IMPORTING THE LIBRARY:

import { PowerBIEmbed } from 'powerbi-client-react';

EMBEDDING A POWER BI REPORT INTO A REACT WEB APPLICATION:

<PowerBIEmbed
embedConfig = {{
type: 'report',   // Supported types: report, dashboard, tile, visual and qna
id: '<ReportId>',
embedUrl: '<EmbedUrl>',
accessToken: '<AccessToken>',
tokenType: models.TokenType.Embed,
settings: {
panes: {
filters: {
visible: false
},
pageNavigation: {
visible: false
}
},
}
}}

// Define event handlers
      eventHandlers = {
new Map([
['loaded', function () { console.log('Report loaded'); }],
['rendered', function () { console.log('Report rendered'); }],
['error', function (event) { console.log(event.detail); }]
])}

// Add CSS classes to the div element
      cssClassName = { "report-style-class" }

// Get reference to the embedded object
      getEmbeddedComponent = { (embeddedReport) => {
this.report = embeddedReport as Report;
}}
/>

Full instructions can be found on the Power BI React README file.

If you want to try it out, you should definitely check out the demo application. It demonstrates the complete flow from bootstrapping the report, to embedding and updating the embedded report.

For instruction on how to run the demo, check out the demo section on the README file.

That’s all for this post. We hope you found it useful. Please continue sending us your feedback – it’s very important for us! Have an amazing feature in mind? Please share it or vote in our Power BI Embedded Analytics Ideas forum.

Source: https://powerbi.microsoft.com/en-us/blog/announcing-react-power-bi/