import '@circadify/web-sdk/react/styles.css';

import { CircadifyProvider } from '@circadify/web-sdk/react';
 
function App() {
  return (
    <CircadifyProvider apiKey="ck_live_your_key_here">
      <YourApp />
    </CircadifyProvider>
  );
}

import { CircadifyScan } from '@circadify/web-sdk/react';
 
function ScanPage() {
  const handleResult = (result) => {
    console.log('Heart Rate:', result.heartRate);
    console.log('Confidence:', result.confidence);
  };
 
  return (
    <CircadifyScan
      type="standard"
      onResult={handleResult}
      onError={(error) => console.error(error)}
    />
  );
}

function ScanPage() {
  const [vitals, setVitals] = useState(null);
 
  return (
    <>
      <CircadifyScan
        type="standard"
        demographics={{ age: 35, sex: 'M' }}
        onResult={(result) => setVitals(result)}
        onError={(error) => alert(error.message)}
      />
      {vitals && (
        <div>
          <p>Heart Rate: {vitals.heartRate} BPM</p>
          <p>SpO2: {vitals.spo2}%</p>
          <p>Confidence: {(vitals.confidence * 100).toFixed(0)}%</p>
        </div>
      )}
    </>
  );
}

import {
  CircadifyProvider,
  CircadifyReadiness,
  CircadifyResults,
  useSession,
  useCamera,
} from '@circadify/web-sdk/react';
import { useRef } from 'react';
import '@circadify/web-sdk/react/styles.css';
 
function CustomFlow() {
  const session = useSession();
  const videoRef = useRef(null);
  const camera = useCamera({ videoRef });
 
  if (session.result) {
    return <CircadifyResults result={session.result} onRescan={() => session.start()} />;
  }
  return (
    <>
      {/* Camera check: live preview + permission/error overlay. landmarks and
          quality stay null here — the SDK emits them only while measureVitals()
          is running, so there is nothing to pass before the scan starts. */}
      <CircadifyReadiness
        videoRef={videoRef}
        landmarks={null}
        quality={null}
        cameraStatus={camera.status}
        cameraError={camera.error}
        onCameraRetry={() => camera.request()}
      />
      {/* Render your own Start button — see the caution below for why the
          built-in one (via onStart) cannot work in this setup. */}
      <button
        type="button"
        disabled={camera.status !== 'ready' || session.isScanning}
        onClick={() => {
          camera.release(); // hand the camera over to the SDK
          session.start({ videoElement: videoRef.current });
        }}
      >
        {session.isScanning ? 'Scanning…' : 'Start Scan'}
      </button>
    </>
  );
}

import { useCircadify } from '@circadify/web-sdk/react';
 
function DebugPanel() {
  const sdk = useCircadify();
  // Access sdk.measureVitals(), sdk.destroy(), sdk.cancel(), sdk.getDeviceCapabilities(), etc.
}

import { useCircadify, useSession } from '@circadify/web-sdk/react';
 
function CustomScan() {
  const client = useCircadify();
  const { session, start, stop, result, error, progress, isScanning } = useSession({
    type: 'standard',
  });
 
  return (
    <div>
      <button onClick={() => start()} disabled={isScanning}>Start Scan</button>
      <button onClick={stop} disabled={!isScanning}>Stop</button>
 
      {isScanning && <p>Progress: {Math.round(progress * 100)}%</p>}
      {error && <p>Error: {error.message}</p>}
      {result && <pre>{JSON.stringify(result, null, 2)}</pre>}
    </div>
  );
}

function CancellableScan() {
  const controllerRef = useRef(null);
  const { start, stop, result } = useSession({ type: 'standard' });
 
  const handleStart = () => {
    controllerRef.current = new AbortController();
    start({ signal: controllerRef.current.signal });
  };
 
  const handleCancel = () => {
    controllerRef.current?.abort();
  };
 
  return (
    <div>
      <button onClick={handleStart}>Start</button>
      <button onClick={handleCancel}>Cancel</button>
    </div>
  );
}

const sdk = useCircadify();
sdk.destroy();