Skip to main content
LabResultsWidget is a lab report viewer that displays a patient’s diagnostic reports alongside individual result values, reference ranges, and abnormal value flags. Clinicians can review preliminary, final, and amended reports, see which values fall outside normal ranges, and access any attached documents — all fetched through a backend proxy you control.
Your ClinikAPI secret key must stay on the server. The LabResultsWidget sends all requests to your proxyUrl. Your backend proxy fetches diagnostic reports using your key and returns them to the widget.

​
Props

​
props.proxyUrl
string
required
URL of your backend proxy endpoint. The widget sends a GET request to this URL and expects a list of FHIR DiagnosticReport resources, each with its associated Observation results included.
​
props.className
string
CSS class name applied to the widget’s root element for layout and theming control.
​
props.onError
(error: Error) => void
Callback invoked when the widget fails to load reports from your proxy. Use this to display an error state to the clinician.

​
Proxy setup

Your proxy endpoint should return the patient’s lab reports sorted by date, most recent first. The example below fetches the 20 most recent reports: 
// app/api/clinik/patients/[id]/labs/route.ts
import { Clinik } from '@clinikapi/sdk';

const clinik = new Clinik(process.env.CLINIKAPI_SECRET_KEY!);

export async function GET(
  req: Request,
  { params }: { params: { id: string } }
) {
  const { data } = await clinik.labs.search({
    patientId: params.id,
    sort: '-date',
    count: 20,
  });

  return Response.json(data);
}
Increase the count parameter if your patients typically have many lab panels per visit. The widget paginates results internally, but fetching more up front reduces the number of round trips.

​
Usage

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

export default function LabsPage({ patientId }: { patientId: string }) {
  return (
    <LabResultsWidget
      proxyUrl={`/api/clinik/patients/${patientId}/labs`}
      onError={(err) => console.error('Lab results error:', err)}
    />
  );
}

​
Features

  • Report list with status badges: displays preliminary, final, and amended reports with clear status indicators
  • Individual result values: shows each result alongside its recorded value and unit
  • Reference ranges: displays the normal range for each result so clinicians can assess values at a glance
  • Abnormal value highlighting: flags values outside the normal range with standard clinical flags (H, L, HH, LL)
  • Conclusion text: renders the interpreting clinician’s conclusion when present in the report
  • Attached document links: surfaces any PDF or document attachments linked to the report
Lab reports are stored as FHIR DiagnosticReport resources with linked Observation resources for each result. The widget expects both to be included in the response from your proxy.