Cornerstone Viewport

This is a set of re-usable components for displaying data with cornerstone.js.

Examples

Props Documentation

COMING SOON


Basic Usage

How to render an array of DICOM images and setup common built-in tools.


Grid Layout

How to render multiple viewports and track the "active viewport".


Custom Overlay and Loader Component

Provide an alternative React Component to use in place of the built in overlay-text and loading indicator components.


Escape Hatch

How to access the created enabledElement so you can leverage cornerstone and cornerstone-tools APIs directly.


Configuring Cornerstone

All of these examples assume that the cornerstone family of libraries have been imported and configured prior to use. Here is brief example of what that may look like in ES6:

1import dicomParser from 'dicom-parser';
2import cornerstone from 'cornerstone-core';
3import cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader';
4import cornerstoneMath from 'cornerstone-math';
5import cornerstoneTools from 'cornerstone-tools';
6import Hammer from 'hammerjs';
7
8export default function initCornerstone() {
9
10  // Cornerstone Tools
11  cornerstoneTools.external.cornerstone = cornerstone;
12  cornerstoneTools.external.Hammer = Hammer;
13  cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
14  cornerstoneTools.init();
15
16  // Image Loader
17  cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
18  cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
19  cornerstoneWADOImageLoader.webWorkerManager.initialize({
20    maxWebWorkers: navigator.hardwareConcurrency || 1,
21    startWebWorkersOnDemand: true,
22    taskConfiguration: {
23      decodeTask: {
24        initializeCodecsOnStartup: false,
25        usePDFJS: false,
26        strict: false,
27      },
28    },
29  });
30}