React integration

The package exports OvokProvider and hooks from its public entry point. Create one client for the app's environment and provide it to the component tree that uses Ovok hooks.

'use client';

import { OvokClient, OvokProvider } from '@ovok/core';
import { useState, type PropsWithChildren } from 'react';

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

  return <OvokProvider client={client}>{children}</OvokProvider>;
}

Hooks can then access the same instance:

'use client';

import { useSlimPatients } from '@ovok/core';

export function PatientList() {
  const { data, loading, error, reload } = useSlimPatients({
    residentState: 'active',
  });

  if (loading) return <p>Loading patients…</p>;
  if (error) return <button onClick={reload}>Try again</button>;

  return <p>{data?.resources.length ?? 0} patients</p>;
}

useClient() returns the OvokClient supplied to the provider. Request hooks expose data, loading, error, and reload; mutation hooks expose data, loading, error, mutate, and reset. Use the client directly when a hook does not match the interaction.

Create an authenticated client in the right lifecycle scope. In a server-rendered application, never share one user session through a module-global client across requests. Keep per-user server clients request-scoped; use a provider instance for the browser app.

Server and client components

OvokClient itself does not depend on React. The provider and hooks do, so use them from a client component in frameworks that separate server and client component graphs. Keep credentials and server-only configuration out of browser code.

For platform authorization, role assignment, or project scoping, use the backend's access policy documentation; the provider only supplies a client and does not grant access.

Common hooks

Need	Hook examples
Access the client	useClient
Read project configuration	useProjectSettings, useProjectFeatures
Load Slim data	useSlimPatients, useSlimDevices, useSlimNotifications
Save measurements	useSaveMeasurement
Work with patient FHIR data	usePatientDashboard, usePatientMeasurementHistory, usePatientQuestionnaires
Read Signals data	useSignalsAlerts, useSignalsThresholds
Read CMS and email configuration	useCmsDocuments, useEmailTemplates

See the SDK surface for the module map and Ovok's guides for complete product workflows.