# NextJS PowerBI Component

A React component intended to bootstrap a Power BI dashboard into your NextJS application

This project is a fork of [React PowerBI Component](https://www.npmjs.com/package/react-powerbi), whose functionality has been updated to work within the context of a NextJS app. Please submit any updates or issues to the parent project

**You probably don't want to use this package in your application.** It is not actively supported and exists to serve only a couple particular use cases

## How to Use

```jsx
import React, { Component } from "react";
import PowerbiEmbedded from "nextjs-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](https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-For-Mobile)

#### Embed Type

The embed type variable allows you to pass in the requested PowerBI "Type", be that a `report`, `dashboard` or `tile`. See [reference](https://microsoft.github.io/PowerBI-JavaScript/interfaces/_src_embed_.iembedconfigurationbase.html#type). By default, `report` is selected.