Skip to main content

React applications

Use @ovok/core to connect a React application to Ovok and build patient or clinician experiences around the workflows your product needs. The SDK provides a shared client, React context, and hooks; your application owns its screens, navigation, and user feedback.

This page covers React integration. It is not a clinical protocol. Set measurement thresholds and escalation behavior with the responsible clinical team before using them with patients.

How the React integration fits​

Create an OvokClient for the active Ovok environment, then place OvokProvider above the part of the React tree that needs the client. Components below the provider can access it with useClient() or use the measurement hooks.

Create the client during application setup and reuse it across renders. Keep the API URL and client ID aligned with the selected environment. The provider and hooks are client-side React APIs; in frameworks with separate server and client components, keep them in the client component tree.

Choose the right entry point​

App taskReact API
Access the shared client from a componentuseClient()
Load and map health observations to measurementsuseObservations()
Save a measurement from a componentuseSaveMeasurement()
Work with an ECG recordinguseEcgRecording()
Load urine test measurementsuseUrineTests()
Read patient workflowsusePatientDashboard(), usePatientMeasurementHistory(), usePatientQuestionnaires()
Read CMS content and translationsuseCmsDocuments(), useTranslations()
Read operational alertsuseSignalsAlerts(), useSlimAlarms()
Browse the full hook surfaceComplete API reference, then open the hooks section in the API reference sidebar

For non-component code or an application that does not use React context, use OvokClient directly.

Set up the provider​

Create one client for the active environment and keep it stable across renders. Wrap the client-side application area that uses hooks with OvokProvider.

'use client';

import { useState } from 'react';
import {
  MeasurementTypeKey,
  OvokClient,
  OvokProvider,
  useObservations,
} from '@ovok/core';

const heartRateTypes = [MeasurementTypeKey.heartRate] as const;

function HeartRateCard() {
  const { measurements, loading, error } = useObservations({
    types: heartRateTypes,
  });

  if (loading) return <p>Loading measurements…</p>;
  if (error) return <p role="alert">{error.message}</p>;

  return <p>{measurements[0]?.heartRate ?? 'No heart-rate reading yet'}</p>;
}

export function App() {
  const [client] = useState(
    () => new OvokClient({
      baseUrl: 'https://api.sandbox.ovok.com',
      fhirUrlPath: '/fhir/R4/',
    }),
  );

  return (
    <OvokProvider client={client}>
      <HeartRateCard />
    </OvokProvider>
  );
}

Replace the example URL and client ID with values for the selected environment. In frameworks with server and client components, keep the provider and hook consumers in the client component tree.

Load measurements​

useObservations() takes the measurement types your screen needs. You can also narrow the search by patient and time period. The result includes mapped measurements, the original observations, a loading state, and an error when the search fails.

Use those states to distinguish loading, successful results, an empty result, and a failed request. The original observations are available when a screen needs resource details alongside the mapped measurement values.

The hook searches observation data and maps it into SDK measurement types. Confirm that the measurement types and device sources your product expects are available in its Ovok environment before designing a workflow around them.

Save measurements​

useSaveMeasurement() gives a component access to the client’s saveMeasurement() operation. The SDK converts typed measurement input into FHIR Observation resources and submits them to Ovok.

A completed save returns a saved result and response. If offline queueing is enabled and the save must wait, the result is queued and includes a queue ID. Treat a queued result as pending until the application receives confirmation that the queued work has been flushed.

Support offline use​

Offline measurement queueing is optional and disabled by default. It requires a durable storage adapter in the client configuration. When the app resumes or detects restored connectivity, call flushOfflineMeasurementQueue() and update the interface from the result.

Keep pending and saved states distinct in the UI. A measurement held locally for later delivery has not yet been confirmed by Ovok.

See Offline measurement saves for client configuration, retry policy, exhausted items, and queue result handling.

Keep the app boundary clear​

  • Place OvokProvider above every component that uses useClient() or a measurement hook.
  • Keep provider and hook use in client-side components.
  • Show loading and failure states when reading observations; do not present a failed search as an empty result.
  • Let the application own navigation and patient or clinician workflows. The SDK supplies client operations, not a finished application interface.
  • Confirm clinical interpretation, thresholds, and escalation paths with the responsible clinical team.

Next steps​