medudoc SDK for ReactJS

This package includes React components designed for seamlessly integrating medudoc into existing UIs.

• IFrame: A wrapper for embedding the medudoc video creation application within React apps.
• CurationForm: Simplified curation form from medudoc, ideal for users seeking an uncomplicated video curation process.

Installation

npm i @medudoc/react-sdk

Usage

IFrame

medudoc applications leverage window.postMessage to dispatch messages to the parent window.

@medudoc/react-sdk exports an Iframe component to facilitate the integration of the medudoc application. It receives a messageHandler prop which can be used to access the message data.

import { Iframe } from "@medudoc/react-sdk";

export const MEDUDOC_URL = "https://medudoc.education";

export default function App() {
  const { iframeRef } = Iframe.useIframe();

  const messageHandler: Iframe.MessageHandler = (event) => {
    switch (event.data.type) {
      case "patientUrl":
        alert("Message received", event.data.payload.patientUrl);
        break;
      default:
        alert("Unhandled event:", event);
    }
  };

  return (
    <Iframe.Iframe
      ref={iframeRef}
      origin={MEDUDOC_URL}
      path="/"
      messageHandler={messageHandler}
      title="medudoc integration"
    />
  );
}

CurationForm

The @medudoc/react-sdk package offers a CurationForm component. This component allows users to integrate a simplified curation process directly into their existing React applications, rather than relying on medudoc's standalone product.

import React from "react";
import { Api, CurationForm. FormSelection } from "@medudoc/react-sdk";

export default function App() {
  const [handover, setHandover] = React.useState<Api.Handover | null>(null);
  const onHandover = (
    handoverState: React.SetStateAction<Api.Handover | null>
  ) => {
    setHandover(handoverState);
  };
  const onConfigLoading = (config: Api.ContentConfig) => console.log(config);
  const onConfigLoadingError = (err: unknown) => alert(err);
  const onHandoverError = (err: unknown) => alert(err);
  const onSubmit = (formSelection: FormSelection) => console.log(formSelection);

  const renderCurationForm = () => (
    <CurationForm
      onSubmit={onSubmit}
      onConfigLoading={onConfigLoading}
      onConfigLoadingError={onConfigLoadingError}
      onHandover={onHandover}
      onHandoverError={onHandoverError}
      baseUrl="http://localhost:8101/api"
      clientId="clientId"
      clientSecret="clientSecret"
    />
  );

  const renderHandoverDetails = (handover: Api.Handover) => (
    <p>{handover.patientUrl}</p>
  );

  return (
    <div className="App">
      {handover ? renderHandoverDetails(handover) : renderCurationForm()}
    </div>
  );
}