@itwin/synchronization-report-react
v2.2.3
Published
## Usage
Downloads
3,107
Keywords
Readme
@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
oraria
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>
);
};
Development
This project was bootstrapped with Vite and uses Yarn v3 without PnP.
The actual components are located in src/components/
and are used by the test app located at src/App.tsx
.
You can open the test app in Stackblitz without cloning the repo:
Available scripts
yarn start
Runs the test app in the development mode.
Open http://localhost:3000 to view it in the browser.
yarn test
Launches the Cypress test runner environment.
See the section about component testing for more information.
yarn build
Generates bundled output in the dist/
directory.
Three files are generated — one each for the ES module, type declarations, and styles.