@itwin/synchronization-report-react NPM

@itwin/synchronization-report-react

Usage

1. Installation

npm i @itwin/synchronization-report-react

yarn add @itwin/synchronization-report-react

2. Imports

Import the component and styles.

import { Report } from '@itwin/synchronization-report-react';
import '@itwin/synchronization-report-react/style.css';

Export maps

If you get an error that style.css can not be found, it might be because your project cannot handle export maps correctly. You can work around this by importing from the actual path (i.e. dist folder):

import '@itwin/synchronization-report-react/dist/style.css';

3. Basic usage

Simply pass your report data and workflow mapping into the Report component.

export const App = () => {
  // ... load report data

  return (
    <>
      <Report data={report} workflowMapping={mapping} />
    </>
  );
};

4. Advanced usage

This package uses a composition approach to provide extreme flexibility. Smaller components are exported and can be passed as children of Report, which makes the report data available through the context API without prop drilling. However, most of the smaller components do accept props to allow using outside Report.

Additionally, all the smaller components also support these props:

displayStrings for localization and for modifying verbiage.
className for specifying custom styles.
rest props for specifying any delegated props (e.g. data or aria attributes).

export const App = () => {
  // ... load report data

  return (
    <Report data={reportData} workflowMapping={mapping}>
      <ReportTitleWrapper>
        <ReportTitle />
        <ReportDebugIds />
      </ReportTitleWrapper>
      <ReportHeaderBannerWrapper>
        <ReportTimestamp />
        <ReportBanner />
      </ReportHeaderBannerWrapper>
      <ReportTableSelectWrapper>
        <Label as='span'>Issues Found</Label>
        <ReportTableSelect />
      </ReportTableSelectWrapper>
      <ReportInfoPanelWrapper>
          <ProblemsTable />
        <ReportInfoPanel />
      </ReportInfoPanelWrapper>
    </Report>
  );
};