Skip to main content
PrescriptionWidget is a read-oriented medication list widget that displays a patient’s current and historical prescriptions. It shows medication names, structured and text-based dosage instructions, refill counts, days supply, prescriber information, and status badges — all fetched through a backend proxy you control. Use it alongside PrescriptionForm when you need both viewing and authoring in the same application.
Your ClinikAPI secret key must stay on the server. The PrescriptionWidget sends all requests to your proxyUrl. Your backend proxy fetches prescription data using your key and returns it 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 MedicationRequest resources for the patient.
​
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 prescriptions from your proxy. Use this to display an error state or trigger a retry.

​
Proxy setup

Your proxy endpoint should return the patient’s prescriptions sorted by date, most recent first: 
// app/api/clinik/patients/[id]/prescriptions/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.prescriptions.search({
    patientId: params.id,
    sort: '-date',
  });

  return Response.json(data);
}
To show only active prescriptions by default, add status: 'active' to the search parameters in your proxy. The widget’s built-in filter lets users toggle between active and inactive, so your proxy can return all statuses and let the widget handle the filtering client-side.

​
Usage

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

export default function PrescriptionsPage({ patientId }: { patientId: string }) {
  return (
    <PrescriptionWidget
      proxyUrl={`/api/clinik/patients/${patientId}/prescriptions`}
      onError={(err) => console.error('Prescription widget error:', err)}
    />
  );
}

​
Features

  • Active/inactive filtering: toggle between current and historical prescriptions
  • Medication name and code: displays the medication name alongside its RxNorm or NDC code
  • Dosage instructions: renders both structured dosage data and free-text sig instructions
  • Refill count and supply duration: shows refills remaining and days supply per fill
  • Prescriber information: displays the ordering clinician’s name and role
  • Status badges: color-coded badges for active, on-hold, completed, and cancelled statuses
Prescriptions are stored as FHIR MedicationRequest resources. If you also use PrescriptionForm, new prescriptions created through the form appear in PrescriptionWidget as soon as your proxy returns the updated list.