JAVASCRIPT 30
Embed powerbi report react By larsborg on 14th April 2020 10:57:23 PM
  1. import React, { useRef, useEffect } from 'react'
  2. import { style } from 'typestyle'
  3. import { models, service, factories } from 'powerbi-client'
  4.  
  5. const id = ''
  6. const embedUrl = ''
  7. const tokenType = models.TokenType.Embed
  8. const accessToken = ''
  9.  
  10. const embedConfiguration = {
  11.     type: 'report',
  12.     id,
  13.         embedUrl,
  14.         tokenType,
  15.         accessToken
  16. }
  17.  
  18. const powerbi = new service.Service(factories.hpmFactory, factories.wpmpFactory, factories.routerFactory)
  19.  
  20. export function SampleReport() {
  21.     const reportContainer = useRef<HTMLDivElement>(null)
  22.  
  23.     useEffect(() => {
  24.         if (reportContainer.current) {
  25.             powerbi.embed(reportContainer.current, embedConfiguration)
  26.         }
  27.     }, [reportContainer])
  28.  
  29.     return (
  30.         <div className={style({ height: '100vh', display: 'flex', flexDirection: 'column' })}>
  31.             <h2>Sample Report</h2>
  32.             <div
  33.                 ref={reportContainer}
  34.                 className={style({ flexGrow: 2 })}
  35.             />
  36.         </div>
  37.     )
  38. }

PasteBin is for source code and general debugging text.

Login or Register to edit, delete and keep track of your pastes and more.

Lars Jansen Internet Consulting
Need some advise before starting your online business strategy or project?
Get in touch!
Cleanse Your CSS!
On average, about 35% of CSS code is completely unnecessary. We meticulously find and remove this unnecessary CSS code.
Raw Paste

Login or Register to edit or fork this paste. It's free.