npm package: @medudoc/react-sdk
Description: Official medudoc SDK for React.js
Author: medudoc
Latest version: 0.0.7

<p align="center">
  <a href="https://www.medudoc.com/" target="_blank" align="center">
    <img src="https://sos-de-fra-1.exo.io/branding/medudoc_logo.svg" width="280">
  </a>
  <br />
</p>

# 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

```sh
npm i @medudoc/react-sdk
```

## Usage

### IFrame

medudoc applications leverage [window.postMessage](https://developer.mozilla.org/en-US/docs/Web/API/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.

```typescript
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.

```typescript
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>
  );
}
```