Skip to main content

VitalsWidget

Records patient vital signs as FHIR Observation resources. Supports heart rate, blood pressure, and other vital measurements with validation.

Usage

import { VitalsWidget } from '@clinikapi/react';

<VitalsWidget
  proxyUrl="/api/clinik"
  patientId="pt_abc123"
  theme="light"
/>

Props

PropTypeRequiredDescription
proxyUrlstringYesBackend proxy URL
patientIdstringYesPatient ID
theme'light' | 'dark'NoColor theme

Form Fields

FieldValidationFHIR Mapping
Heart Rate20-250 bpmObservation (LOINC 8867-4)
Blood PressureRequired formatObservation (LOINC 85354-9) with systolic/diastolic components

Supported Observation Fields

The widget creates observations using the enriched Observation schema:
  • status — always final
  • code — LOINC vital sign code
  • patientId — patient reference
  • categoryvital-signs
  • valueQuantity — numeric value with unit
  • component — for multi-component observations (e.g. BP systolic/diastolic)
  • interpretation — H (high), L (low), N (normal)
  • referenceRange — normal reference ranges
  • effectiveDateTime — when the measurement was taken
  • issued — when this version was made available

Proxy Action

The widget sends observations.create with:
{
  "action": "observations.create",
  "data": {
    "patientId": "pt_abc123",
    "status": "final",
    "code": { "system": "http://loinc.org", "code": "8867-4", "display": "Heart rate" },
    "category": "vital-signs",
    "valueQuantity": { "value": 72, "unit": "bpm" },
    "effectiveDateTime": "2025-01-15T10:00:00Z"
  }
}