@reportwright/react

@reportwright/react

The ReportWright viewer and designer as React components. React is a peer dependency; the viewer loads on mount, so it is safe in server-rendered apps (Next.js, Remix).

import { ReportWrightViewer, ReportWrightDesigner } from '@reportwright/react';

<ReportWrightViewer definition={def} data={{ orders }} fontsUrl="/pw/fonts/" style={{ height: 720 }} />   {/* no server */}
<ReportWrightViewer server="https://reports.example.com" report="invoice" params={{ id: '42' }} style={{ height: 720 }} />
<ReportWrightDesigner server="https://reports.example.com" definition={def} onSave={(d) => save(d)} toolbox={{ hide: ['map'] }} />

Props are the options of mountViewer / mountDesigner (see @reportwright/viewer), plus className, style and onReady(handle). A ref gets the same ViewerHandle as onReady (setParameters, goToPage, export, on, …; see @reportwright/viewer), so const viewer = useRef(null) … <ReportWrightViewer ref={viewer} … /> then viewer.current?.setParameters({ id: '7' }). The viewer remounts when what it shows changes (compared by content, so inline objects are fine); the designer only for another report or a definition with different content, so it keeps its edits. If the viewer's code fails to load, the element shows the error and onError(error) is called. MIT.

No server needed: pass definition, data (JSON by data source name) and fontsUrl (a copy of @reportwright/fonts/public/fonts). server (the self-hosted ReportWright server) is optional: see what works standalone.