> ## Documentation Index
> Fetch the complete documentation index at: https://docs.connect.fastenhealth.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Display & Component Library

> Render and customize FHIR resources in your frontend with fhir-react or extract individual fields with fhirpath.js.

## 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](https://www.npmjs.com/package/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

```bash theme={null}
npm install fhir-react
```

```tsx theme={null}
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.

```tsx theme={null}
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/](https://fastenhealth.github.io/fhir-react/)

Local run (required for Node ≥17):

```bash theme={null}
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](https://github.com/HL7/fhirpath.js) to evaluate FHIRPath expressions in the browser or server, then render the result
with your design system.

### Install

```bash theme={null}
npm install fhirpath
```

### Example: extract a display name

```ts theme={null}
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.