Fhir React

screenshot of Fhir React

Fhir React

FHIR React Component Library


The fhir-react package is a React component library designed for displaying FHIR (Fast Healthcare Interoperability Resources) data. It offers a convenient way to render FHIR resources in a user-friendly manner. This library provides a FhirResource component and an fhirVersions object as its exports. The FhirResource component allows users to pass FHIR data as a JavaScript object and customize the display with optional header icons. Additionally, users have the ability to override default functionality and configure the component according to their needs.


  • FhirResource Component: Renders the provided FHIR resource in a visually appealing format.
  • Customizable Header Icons: Allows users to customize header icons in various ways, including passing a URL, an <img> element, a React src from import, or a false value to display a placeholder.
  • Resource Icon Display: Displays the resource icon, if available, or a placeholder if not provided.
  • Overriding Default Accordion Functionality: Users can override the default Accordion function by passing a custom function to the onClick variable.
  • Assigning Accordion IDs: Users can assign a number to be added at the end of the Accordion ID. If no number is provided, the library uses the lodash uniqueId function by default.
  • Props for FhirResource Component: The FhirResource component accepts several props, including fhirResource (the FHIR resource to be rendered), fhirVersion (the FHIR resource version), withCarinBBProfile (to use the Carin BB profile extension), withDaVinciPDex (to use the DaVinci Payer Data Exchange profile extension), and thorough (to determine if all array items and supported attributes should be displayed).


To install the fhir-react package, follow these steps:

  1. Open your terminal and navigate to the desired directory for your project.
  2. Run the following command to install the package via npm:
npm install fhir-react


The fhir-react package provides a React component library for displaying FHIR data. It offers features such as flexible customization options, resource icon display, and the ability to override default functionality. By using the FhirResource component and its props, users can easily render FHIR resources in their React applications.