Contact Us : +91 90331 80795

Blog Details

Breadcrub
Blog Detail

5 Steps to Integrating a DICOM Viewer in React for Healthcare Apps

Modern healthcare systems handle a lot of medical images, such as X-rays, MRIs, and CT scans. These images help doctors diagnose diseases and track patient health. To manage and view these images, hospitals use a system called DICOM (Digital Imaging and Communications in Medicine). DICOM is the worldwide standard for storing and sharing medical images.
 
In this blog, we will explain how to add a DICOM Viewer to a React-based Hospital Management System (HMS). Specifically, we will focus on how to display X-ray images inside the system. We will go through the tools, steps, and best practices to make the integration smooth and effective.
 

Why is a DICOM Viewer Important in a Hospital Management System?

 
A Hospital Management System (HMS) is software that helps hospitals store and organize medical data. One of the most important types of data is medical images, such as X-rays, MRIs, and CT scans. A DICOM Viewer allows doctors and healthcare professionals to:
 
  • View X-rays and other medical images directly inside the HMS.

  • Zoom in, pan, and adjust images for a clearer diagnosis.

  • Store and retrieve images easily without needing external software.
By integrating a DICOM Viewer into an HMS, hospitals can improve workflow efficiency, reduce manual work, and enhance patient care.
 

Market Insights

 
A recent report from 2024 predicts that the global medical imaging market will reach $45 billion by 2027. More hospitals and clinics are moving toward digital solutions like DICOM Viewers to manage and store images efficiently.
 

What You Need Before You Start

 
Before integrating a DICOM Viewer into your React application, make sure you have the following:
 
1. A React Project: If you don’t have one, we will guide you on how to create it.
 
2. DICOM Libraries: These libraries help to read and display DICOM images.
 
  • cornerstone.js (to load and display images)

  • dicom-parser (to process DICOM files)

  • OHIF Viewer (a pre-built DICOM viewer based on React)
 
3. Sample DICOM Files: These are medical image files (e.g., X-rays) that you can use for testing.
 
4. A Backend for Image Storage: You need a backend system that can store and retrieve images. This can be a PACS (Picture Archiving and Communication System) or a simple REST API.
 
Now, let’s go step by step to integrate the DICOM Viewer into a React-based HMS.

Step-by-Step Guide to Integrate DICOM Viewer in React

 
 

Step 1: Set Up a React Application

 
If you don’t have a React project, create one by running the following commands:
npx create-react-app dicom-viewer-app
cd dicom-viewer-app
npm start
 
This will create a new React project and start the development server.
 

Step 2: Install Required Libraries

 
To load and display DICOM files, install the necessary libraries:
npm install cornerstone-core cornerstone-tools cornerstone-wado-image-loader dicom-parser
 
These libraries will allow your React app to read and display DICOM images.
 

Step 3: Configure Cornerstone.js

 

In your React project, set up cornerstone and cornerstoneWADOImageLoader to handle DICOM files.

import cornerstone from 'cornerstone-core';
import cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader';
import dicomParser from 'dicom-parser';

cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
cornerstoneWADOImageLoader.external.dicomParser = dicomParser;

export const initializeCornerstone = () => {
  cornerstoneWADOImageLoader.configure({
    beforeSend: function(xhr) {
      xhr.setRequestHeader('Accept', 'application/dicom');
    },
  });
};
 
This code sets up the DICOM file loader so it can read medical images correctly.
 

Step 4: Create a DICOM Viewer Component

 
Now, create a new file DicomViewer.js to handle DICOM image loading and display.
import React, { useEffect, useRef } from 'react';
import cornerstone from 'cornerstone-core';
import cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader';

const DicomViewer = ({ dicomUrl }) => {
  const viewerRef = useRef(null);

  useEffect(() => {
    cornerstone.enable(viewerRef.current);
    cornerstone.loadAndCacheImage(dicomUrl).then((image) => {
      cornerstone.displayImage(viewerRef.current, image);
    });
    return () => cornerstone.disable(viewerRef.current);
  }, [dicomUrl]);

  return <div ref={viewerRef} style={{ width: '512px', height: '512px', backgroundColor: 'black' }} />;
};

export default DicomViewer;

 

Step 5: Use the DICOM Viewer Component in Your App

 

Now, import the DicomViewer component into your main App.js file.

import React from 'react';
import DicomViewer from './DicomViewer';

function App() {
  const dicomUrl = 'wadouri:http://your-server.com/path-to-dicom-file.dcm';
  return <DicomViewer dicomUrl={dicomUrl} />;
}

export default App;
 
Replace http://your-server.com/path-to-dicom-file.dcm with the actual URL of your DICOM file.
 

Step 6: Test the Integration

 
Start your React application by running:
npm start
 
  • Open the app in your browser.

  • Load a sample DICOM file.

  • Test the zoom, pan, and image rendering capabilities.
 
If everything is set up correctly, you should see the X-ray image displayed in the viewer.
 

Additional Features You Can Add

 
Once the basic DICOM Viewer is working, you can enhance it with additional features:
 
  • Zoom and Pan Tools: Allow users to zoom in and move around the image.

  • Measurement Tools: Enable measuring distances and angles within the image.

  • Annotations: Let doctors mark critical areas on the image.
  • Image Comparison: Show multiple images side by side.
  • Storage and Retrieval: Connect to a PACS system for better storage and image management.

 

Final Thoughts

 
Integrating a DICOM Viewer into a React-based Hospital Management System helps healthcare professionals easily analyze and manage X-ray data. By 2026, nearly 90% of hospitals are expected to use digital imaging solutions.
 
With tools like cornerstone.js, the integration process is simple, scalable, and flexible.
 

Contact us for Custom Healthcare Solutions

 
At Sparkle Web, we specialize in healthcare software solutions, including DICOM integration, HMS development, and medical imaging software. If you need a React-based healthcare application or PACS system integration, our expert developers can help.
 

Get in touch with us today to build a secure and scalable Hospital Management System!

    Author

    • Owner

      Vaishali Gaudani

      Skilled React.js Developer with 3+ years of experience in creating dynamic, scalable, and user-friendly web applications. Dedicated to delivering high-quality solutions through innovative thinking and technical expertise.

    Contact Us

    Free Consultation - Discover IT Solutions For Your Business

    Unlock the full potential of your business with our free consultation. Our expert team will assess your IT needs, recommend tailored solutions, and chart a path to success. Book your consultation now and take the first step towards empowering your business with cutting-edge technology.

    • Confirmation of appointment details
    • Research and preparation by the IT services company
    • Needs assessment for tailored solutions
    • Presentation of proposed solutions
    • Project execution and ongoing support
    • Follow-up to evaluate effectiveness and satisfaction

    • Email: info@sparkleweb.in
    • Phone Number:+91 90331 80795
    • Address: 303 Capital Square, Near Parvat Patiya, Godadara Naher Rd, Surat, Gujarat 395010