fhir-report

A React component library for displaying FHIR data.

Installation

npm install --save fhir-report

Usage

This package has two exports: a FhirResource React component and fhirVersions object.

import { FhirResource, fhirVersions } from 'fhir-report';

Render the component providing the FHIR data as a JavaScript object:

const MyComponent = () => {
  const fhirResource = JSON.parse(fhirResourceAsJsonString);
  return (
    <FhirResource
      fhirResource={fhirResource}
      fhirVersion={fhirVersions.R4}
      fhirIcons={fhirIcons}
      withCarinBBProfile
    />
  );
};

Optionally custom header icons could be passed as fhirIcons props. The shape of the passed object should be as in example below with resource type as the key and image url or DOM node as the value:

import React from 'react';

export default {
  Condition: (
    <img
      src={require('./dstu2/resources/condition/condition.svg')}
      alt="header icon"
    />
  ),
  Immunization: (
    <img
      src={require('./dstu2/resources/immunization/immunization.svg')}
      alt="header icon"
    />
  ),
};

FhirResource component props

| Prop | Type | Default | Description | | -------------------- | ---------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | fhirResource* | Object | - | The FHIR resource to be rendered | | fhirVersion* | fhirVersions.DSTU2, fhirVersions.STU3, fhirVersions.R4 | - | FHIR resource version | | withCarinBBProfile | Boolean | false | Use Carin BB profile extension on top of the HL7 default FHIR specification https://build.fhir.org/ig/HL7/carin-bb/index.html | | withDaVinciPDex | Boolean | false | Use DaVinci Payer Data Exchange (PDex) profile extension on top of the HL7 default FHIR specification https://hl7.org/fhir/us/davinci-drug-formulary/index.html | | thorough | Boolean | false | If this is set to true, or if it is absent, all array items and supported attributes will be displayed. Otherwise if this is false then only the first or otherwise important items will be displayed |

* required props

Available fhirVersions

• fhirVersions.DSTU2 - http://hl7.org/fhir/dstu2/index.html
• fhirVersions.STU3 - http://hl7.org/fhir/stu3/index.html
• fhirVersions.R4 - http://hl7.org/fhir/r4/

Available resources

| Resource | DSTU2 | STU3 | R4 | Carin BB Profile | DaVinci PDex | | -------------------------- | :---: | :---: | :---: | :--------------: | ------------ | | AdverseEvent | N/A | ✅ | ✅ | | AllergyIntolerance | ✅ | ✅ | ✅ | | AdverseEvent | N/A | ✅ | ✅ | | AllergyIntolerance | ✅ | ✅ | ✅ | | Appointment | ✅ | ✅ | ✅ | | Bundle | ✅ | ✅ | ✅ | | CarePlan | ✅ | ✅ | ✅ | | CareTeam | N/A | ✅ | ✅ | | Claim | ✅ | ✅ | ✅ | | ClaimResponse | ✅ | ✅ | ✅ | | Condition | ✅ | ✅ | ✅ | | Coverage | ✅ | ✅ | ✅ | | Device | ✅ | ✅ | ✅ | | DiagnosticReport | ✅ | ✅ | ✅ | | DocumentReference | ✅ | ✅ | ✅ | | Encounter | ✅ | ✅ | ✅ | | ExplanationOfBenefit | ✅ | ✅ | ✅ | ✅ | | Goal | ✅ | ✅ | ✅ | | Immunization | ✅ | ✅ | ✅ | | List | ✅ | ✅ | ✅ | | ✅ | | Location | ✅ | ✅ | ✅ | | Medication | ✅ | ✅ | ✅ | | MedicationAdministration | ✅ | ✅ | ✅ | | MedicationDispense | ✅ | ✅ | ✅ | | MedicationKnowledge | N/A | N/A | ✅ | | ✅ | | MedicationRequest | N/A | ✅ | ✅ | | MedicationStatement | ✅ | ✅ | ✅ | | Observation | ✅ | ✅ | ✅ | | Organization | ✅ | ✅ | ✅ | | Patient | ✅ | ✅ | ✅ | | Practitioner | ✅ | ✅ | ✅ | | PractitionerRole | N/A | ✅ | ✅ | | Procedure | ✅ | ✅ | ✅ | | Questionnaire | ✅ | ✅ | ✅ | | QuestionnaireResponse | ✅ | ✅ | ✅ | | ReferralRequest | ✅ | ✅ | N/A | | ResearchStudy | N/A | ✅ | ✅ |

Styles update v0.3

The 0.3 version of the FHIR React Component library introduces the bootstrap Accordion component as the base of each available resource which provides any data. The RWD support is provided for each component.

Available resources v0.3

| Resource | DSTU2 | STU3 | R4 | Carin BB Profile | DaVinci PDex | | -------------------------- | :---: | :---: | :---: | :--------------: | ------------ | | Appointment | ✅ | ✅ | ✅ | | Condition | ✅ | ✅ | ✅ | | Encounter | ✅ | ✅ | ✅ | | ExplanationOfBenefit | ✅ | ✅ | ✅ | ✅ | | Immunization | ✅ | ✅ | ✅ | | Observation | ✅ | ✅ | ✅ | | Patient | ✅ | ✅ | ✅ | | Practitioner | ✅ | ✅ | ✅ | | Procedure | ✅ | ✅ | ✅ |

The update does not change the datasets which components are able to handle. It means that user can display the same particulars as in the previous version of the specific component.

Styles

Optional CSS styles are provided with this library. They are split into two files:

• style.css with basic styling of the components
• bootstrap-reboot.min.css further enhancing those styles

To use provided styles include them in the React component:

import 'fhir-report/build/style.css';
import 'fhir-report/build/bootstrap-reboot.min.css';

Build

npm run build