react-powerbi

React PowerBI Component

This is to get you quickly embed your powerbi reports to your React Application.

Right now (before v1), it's very much a work in progress. Please submit your issues.

How to Use

import React, { Component } from 'react'
import PowerbiEmbedded from 'react-powerbi'
 
class App extends Component {
  render () {
    return (
      <div className='App'>
        <PowerbiEmbedded
          id={`${YOUR_REPORT_ID}`} // required
          embedUrl={`${YOUR_EMBED_URL}`} // required
          accessToken={`${YOUR_EMBED_TOKEN}`} // required
          filterPaneEnabled={false}
          navContentPaneEnabled={false}
          pageName={`${YOUR_PAGE_ID}`}
          embedType={`${EMBED_TYPE}`}
          tokenType={`${TOKEN_TYPE}`}
          permissions={`${PERMISSIONS}`}
          settings={{
            // any settings including localeSettings
          }}
          width='600px'
          height='900px'
        />
      </div>
    )
  }
}
 
export default App

Mobile Optimization

You only need to add mobile prop as boolean.

That set a configuration { layoutType: models.LayoutType.MobilePortrait }.

Check this reference

Embed Type

The embed type variable allows you to pass in the requested PowerBI "Type", be that a report, dashboard or tile. See reference. By default, report is selected.

TODO

• Add .d.ts file for typescript (Thanks @Joonaspraks!)