previta-videocall

Previta Videocall React Component

Setup

This library is available on npm, install it with: npm i previta-videocall.

Usage

1. Import previta-videocall:

import { ChatScreen } from "previta-videocall";

2. Create a <ChatScreen> component:

function WrapperComponent() {
  return (
    <ChatScreen
      email="Client Email"
      identity="User name"
      logo="urlLogo.png"
      onLeave={handleClose}
      prod={false}
      setDisconnect={setDisconnect}
      source="Example"
    />
  );
}

A complete example

The following example consists in a component with a form with the necessary fields to make a request for medical consultation.

import React, { useEffect, useState } from "react";
import { ChatScreen } from "previta-video-call-module-mm";
import "./App.css";
import AlertDialog from "./components/AlertDialog";
import LoadingScreen from "./components/LoadingScreen";

const ChatLayout = () => {
  const [open, setOpen] = useState(false);
  const [disconnect, setDisconnect] = useState(true);
  const [identity, setIdentity] = useState("");
  const [email, setEmail] = useState("");

  const handleClose = () => {
    setOpen(true);
    setDisconnect(true);
  };

  return (
    <>
      <AlertDialog open={open} onClose={() => setOpen(false)} />
      {!disconnect ? (
        <ChatScreen
          email={email}
          identity={identity}
          onLeave={handleClose}
          prod={false}
          setDisconnect={setDisconnect}
          source="Client Name"
        />
      ) : (
        <div className="formContainer">
          <div className="form">
            <input
              placeholder="Patient Name"
              value={identity}
              onChange={(e) => setIdentity(e.target.value)}
            />
            <input
              placeholder="Email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
            <button
              disabled={!identity || !email}
              onClick={() => {
                setDisconnect(false);
                setIsLoading(true);
              }}
            >
              Start chat
            </button>
          </div>
        </div>
      )}
    </>
  );
};

export default ChatLayout;

Available props

| Name | Type | Default | Description | | --------------- | -------- | -------------- | --------------------------------------------------- | | email | string | REQUIRED | Patient Email | | identity | string | REQUIRED | Patient Name | | logo | string | Previta Logo | Client logo can be url or base64 | | onLeave | func | REQUIRED | Function to handle the close of the chat room | | prod | bool | false | Production or Dev environment | | setDisconnect | func | REQUIRED | Function to handle disconnection from the chat room | | source | string | REQUIRED | Client name |

Environment Variables

You should set environment variables for the apiKey and apiToken with the API_TOKEN and API_KEY keys. The app will read the environment variables and use them.

Example:
API_TOKEN = xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
API_KEY = xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

If you created the app with create-react-app you can set the environment variables as follows:
REACT_APP_API_TOKEN = xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
REACT_APP_API_KEY = xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx