Skip to main content

​
Overview

If you need to preview Fasten Connect data in your product quickly, leverage existing component libraries instead of building FHIR resource renderers from scratch. The fhir-react project gives you production-ready React components that accept raw JSON resources, while fhirpath.js is a lightweight helper for pulling specific fields into custom UI. Most teams mix both: use fhir-react for high-fidelity cards and fall back to fhirpath.js when you only need a data point or two.

​
fhir-react in practice

fhir-react is a React component library that renders FHIR resources across DSTU2, STU3, and R4 (including CARIN Blue Button and DaVinci PDex) entirely on the client. It ships with Storybook-driven documentation so you can preview every resource before embedding it in your app.

​
Install & import

npm install fhir-react

import { FhirResource, fhirVersions } from 'fhir-react';
import 'fhir-react/build/style.css';
import 'fhir-react/build/bootstrap-reboot.min.css';

function ResourceCard({ resource }) {
  return (
    <FhirResource
      fhirResource={resource}
      fhirVersion={fhirVersions.R4}
      withCarinBBProfile
    />
  );
}

​
Icon strategy

  • Let fhir-react provide defaults by omitting the fhirIcons prop.
  • Pass a custom icon map (URL, <img />, imported SVG module, or false to hide icons) for branded experiences.
const fhirIcons = {
  Patient: require('assets/patient.svg'),
  Encounter: <img src="/icons/encounter.svg" alt="Encounter" />,
};

<FhirResource fhirResource={patient} fhirIcons={fhirIcons} />;

​
Browse Storybook

deep links: https://fastenhealth.github.io/fhir-react/ Local run (required for Node ≥17): 
NODE_OPTIONS=--openssl-legacy-provider npm run storybook
Use Storybook to validate layouts, inspect props, and copy JSON fixtures before wiring them into your Fasten Connect integration.

​
Suggested development flow

  1. npm install
  2. Run Storybook locally to explore components.
  3. Import FhirResource (or other exports) and feed them resources returned by Fasten Connect.
  4. Fine tune icons, profiles, and CSS overrides, then ship.

​
When to reach for fhirpath.js

Sometimes you only need to show a field or two (e.g., Patient.name[0].given[0]) rather than the entire resource card. Use fhirpath.js to evaluate FHIRPath expressions in the browser or server, then render the result with your design system.

​
Install

npm install fhirpath

​
Example: extract a display name

import fhirpath from 'fhirpath';

export function getDisplayName(resource) {
  const [name] = fhirpath.evaluate(resource, 'Patient.name.given[0] & " " & Patient.name.family');
  return name ?? 'Unknown patient';
}
Use the extracted values in your components or pass them into analytics, search indices, or notification templates.

​
Choosing the right tool

  • Start with fhir-react when you want to stand up polished, data-rich cards with minimal effort.
  • Layer fhirpath.js wherever you need to cherry-pick fields for bespoke UI, filters, or downstream systems.
  • Combine both: render the full resource via fhir-react, but drive surrounding UI (breadcrumbs, headlines, CTAs) using values pulled with fhirpath.js.
By leaning on these libraries you minimize bespoke rendering code, accelerate delivery, and preserve fidelity across the numerous FHIR profiles Fasten Connect makes available.