ImFusion Web SDK React Bindings

React components and hooks for using the ImFusion Web SDK in React applications. This package provides a canvas, SDK lifecycle components, and hooks for working with medical image data. It builds on @imfusion/sdk.

Documentation: docs.imfusion.com/websdk.

Getting Started

Install both packages in your React application:

npm install @imfusion/sdk @imfusion/sdk-react

Wrap your app with ImFusionProvider, add a canvas, and use the lifecycle components:

tsx

import { ImFusionProvider, ImFusionCanvas, ImFusionReady, ImFusionLoading, ImFusionError } from '@imfusion/sdk-react';

function App() {
  return (
    <ImFusionProvider>
      <ImFusionCanvas style={{ width: '100%', height: '100%' }} />
      <ImFusionLoading>Initializing SDK...</ImFusionLoading>
      <ImFusionError>{(error) => <p>Failed: {error.message}</p>}</ImFusionError>
      <ImFusionReady>
        <Viewer />
      </ImFusionReady>
    </ImFusionProvider>
  );
}

Inside ImFusionReady, use hooks to interact with the SDK:

tsx

import { useDataLoader, useData } from '@imfusion/sdk-react';

function Viewer() {
  const { loadFileFromUrl, isLoading } = useDataLoader();
  const datasets = useData();

  return (
    <div>
      <button onClick={() => loadFileFromUrl('/data/scan.nii.gz')} disabled={isLoading}>
        {isLoading ? 'Loading...' : 'Load'}
      </button>
      <p>{datasets.length} dataset(s) loaded</p>
    </div>
  );
}

License

Use of this package is governed by the ImFusion end user license agreement, included as LICENSE.txt in the package.

Interfaces

Interface	Description
ImFusionErrorProps	-
ImFusionLoadingProps	-
ImFusionProviderProps	-
ImFusionReadyProps	-
DataLoaderProgress	-
ImFusionState	-

Functions

Function	Description
ImFusionError	Renders children when SDK initialization has failed.
ImFusionLoading	Renders children while the SDK is initializing.
ImFusionProvider	Initializes the ImFusion SDK and provides it to descendant components.
ImFusionReady	Renders children only after the SDK has successfully initialized.
useAnnotations	Returns a reactive list of annotations, optionally filtered by dataset.
useContextMenu	Registers a context menu handler that fires when the SDK produces a context menu from an input event.
useData	Returns a reactive list of all data in the data model.
useDataLoader	Provides data loading methods with reactive loading, progress, and error state.
useDisplayOptions2d	Returns the reactive 2D display options for a dataset.
useDisplayOptions3d	Returns the reactive 3D display options for a dataset.
useFrameSelection	Returns the reactive selection for a dataset.
useImFusion	Returns the initialized ImFusion SDK instance.
useImFusionError	Returns the SDK initialization error.
useImFusionState	Returns the SDK initialization state.
useLabelConfig	Returns the reactive `LabelConfigMap` state of a label map.
useLayoutMode	Returns the reactive display layout mode.
useThumbnail	Returns an object URL pointing at a PNG thumbnail of `data`. Returns `null` when: - Thumbnail is still being generated or - `data` is nullish, or if it does not support thumbnails.
useViewVisibility	Returns the reactive 'hidden' state of a view.
useVisibleData	Returns the reactive list of currently visible datasets.

Variables

Variable	Description
ImFusionCanvas	Renders a canvas element and registers it with the ImFusionProvider.