React components

The package exports React wrappers for the webcomponents listed below. Props are typed from each element's JavaScript properties; use property names such as filesString rather than HTML attribute names such as group-files. Each source link points to the webcomponent class defining the element and its properties. Follow that class's inheritance for properties declared by a base class.

All wrappers require LabirthermalProvider. Components that consume thermal context also need the relevant providers; see the @labirthermal/webcomponents context guide.

Applications

React component	Webcomponent	Source and properties
ThermalDropinApp	thermal-dropin-app	ThermalDropinAppElement
ThermalFileApp	thermal-file-app	ThermalFileAppElement
ThermalGroupApp	thermal-group-app	ThermalGroupAppElement
ThermalSlottedApp	thermal-simple-app	ThermalSlottedAppElement
AatApp	apparent-temperature-aat	AatAppElement

ThermalFileApp, ThermalGroupApp and ThermalDropinApp are self-contained applications; the other two wrappers expose their respective app elements.

<LabirthermalProvider>
  <ThermalFileApp thermal="/thermal/recording.lrc" />
</LabirthermalProvider>

UI

React component	Webcomponent	Source and properties
ThermalApp	thermal-app	ThermalAppElement
ThermalBar	thermal-bar	ThermalBarElement
ThermalBtn	thermal-btn	ThermalBtnElement
ThermalBtnGroup	thermal-btn-group	ThermalBtnGroupElement
ThermalDialog	thermal-dialog	ThermalDialogElement
ThermalDropdown	thermal-dropdown	ThermalDropdownElement
ThermalDropin	thermal-dropin	ThermalDropinElement
ThermalExpandable	thermal-expandable	ThermalExpandableElement
ThermalField	thermal-field	ThermalFieldElement
ThermalIcon	thermal-icon	ThermalIconElement
ThermalLoading	thermal-loading	ThermalPosterElement
ThermalRadio	thermal-radio	ThermalRadioElement
ThermalSlot	thermal-slot	ThermalSlotElement
ThermalSpinner	thermal-spinner	ThermalSpinnerElement
ThermalTip	thermal-tip	ThermalTipElement

<ThermalBtn variant="primary">Open</ThermalBtn>

Manager

React component	Webcomponent	Source and properties
ManagerProvider	manager-provider	ManagerProviderElement
ManagerGraphSmoothSwitch	manager-graph-smooth-switch	ManagerGraphSmoothSwitch
ManagerImageSmoothSwitch	manager-image-smooth-switch	ManagerImageSmoothSwitch
ManagerPaletteButtons	manager-palette-buttons	ManagerPaletteButtons
ManagerPaletteDropdown	manager-palette-dropdown	ManagerPaletteDropdown
ManagerToolBar	manager-tool-bar	ManagerToolBar
ManagerAdvancedPaletteSwitch	manager-advanced-palette-switch	ManagerAdvancedPaletteSwitch
ManagerUnitSwitch	manager-unit-switch	ManagerUnitSwitch
ManagerExportPanel (deprecated)	manager-export-panel	ManagerExportPanel

<LabirthermalProvider>
  <ManagerProvider>
    <ManagerPaletteDropdown />
  </ManagerProvider>
</LabirthermalProvider>

Registry

React component	Webcomponent	Source and properties
RegistryProvider	registry-provider	RegistryProviderElement
RegistryHistogram	registry-histogram	RegistryHistogram
RegistryOpacitySlider	registry-opacity-slider	RegistryOpacitySlider
RegistryRangeAutoButton	registry-range-auto-button	RegistryRangeAutoButton
RegistryRangeFullButton	registry-range-full-button	RegistryRangeFullButton
RegistryRangeDisplay	registry-range-display	RegistryRangeDisplay
RegistryRangeForm	registry-range-form	RegistryRangeForm
RegistryRangeSlider	registry-range-slider	RegistryRangeSlider
RegistryTicksBar	registry-ticks-bar	RegistryTicksBar

<LabirthermalProvider>
  <ManagerProvider>
    <RegistryProvider>
      <RegistryRangeSlider />
    </RegistryProvider>
  </ManagerProvider>
</LabirthermalProvider>

Group

React component	Webcomponent	Source and properties
GroupProvider	group-provider	GroupProviderElement
GroupAnalysisSyncButton	group-analysis-sync-button	GroupAnalysisSyncButton
GroupChart	group-chart	GroupChartElement
GroupDownloadButtons	group-download-buttons	GroupDownloadButtons
GroupDownloadDropdown	group-download-dropdown	GroupDownloadDropdown
GroupDropin	group-dropin-element	GroupDropinElement
GroupDropinInput	group-dropin-input	GroupDropinInputElement
GroupRangePropagator	group-range-propagator	GroupRangePropagatorElement
GroupTimeline	group-timeline	GroupTimelineElement

<LabirthermalProvider>
  <ManagerProvider>
    <RegistryProvider>
      <GroupProvider>
        <GroupTimeline />
      </GroupProvider>
    </RegistryProvider>
  </ManagerProvider>
</LabirthermalProvider>

File and analysis

React component	Webcomponent	Source and properties
FileProvider	file-provider	FileProviderElement
FileCopy	file-copy	FileCopyElement
FileCanvas	file-canvas	FileCanvasElement
FileDownloadButton	file-download-dropdown	FileDownloadButton
FileInfoButton	file-info-button	FileInfoButton
FilePlaybackSpeedDropdown	file-playback-speed-dropdown	FilePlaybackSpeedDropdown
FileTimeline	file-timeline	FileTimelineElement
FileVideoExportButton	file-video-export-button	FileVideoExportButton
FileVideoExportPanel	file-video-export-panel	FileVideoExportPanel
FileLabel	file-label	FileLabelElement
FileButton	file-button	FileButtonElement
FileDropdown	file-dropdown-elt	FileDropdown
FileLrcButton	file-download-lrc	FileLrcButton
FilePngButton	file-download-png	FilePngButton
FileRangePropagator	file-range-propagator	FileRangePropagator
FileAnalysisComplex	file-analysis-complex	FileAnalysisComplexElement
FileAnalysisDisplay	file-analysis-display	FileAnalysisDisplayElement
FileAnalysisEditDialog	file-analysis-edit	FileAnalisisEditDialog
FileAnalysisGraph	file-analysis-graph	FileAnalysisGraphElement
FileAnalysisRow	file-analysis-table-row	FileAnalysisRowElement
FileAnalysisTable	file-analysis-table	FileAnalysisTableElement
AnalysisColorDropdown	analysis-color	AnalysisColorDropdown
AnalysisNameInput	analysis-name	AnalysisNameInput
AreaEditTable	edit-area	AreaEditTable
EditpointTable	edit-point	EditpointTable
ThermalChart	thermal-chart	ThermalChartElement
FileDetail	file-detail	FileDetailElement
FileThumbnail	file-thumbnail	FileThumbnailElement

<LabirthermalProvider>
  <ManagerProvider>
    <RegistryProvider>
      <GroupProvider>
        <FileProvider thermal="/thermal/recording.lrc">
          <FileCanvas />
          <FileTimeline />
        </FileProvider>
      </GroupProvider>
    </RegistryProvider>
  </ManagerProvider>
</LabirthermalProvider>

Wrapper implementation

The wrappers use @lit/react to bridge custom elements to React. The package resolves constructors from the webcomponents catalog after LabirthermalProvider initializes it, preserving browser-only loading. Each exported React component's JSDoc links to the type-only imported class that defines its corresponding webcomponent's properties.

See the React documentation for React fundamentals.