Code example
The following examples demonstrate how to control the visibility of the SDK using theshowCloseButton prop.
- With Close Button
- Without Close Button
This example shows how to control the visibility of the web SDK using the
showCloseButton prop. When the showCloseButton is set to true, the close button is visible and the onClose prop is available.React
import { useEffect, useMemo, useState } from "react";
import { SukiAuthManager } from "@suki-sdk/core";
import { SukiAssistant, SukiProvider, useSuki } from "@suki-sdk/react";
function ComponentWithCloseButton() {
const authManager = useMemo(
() =>
new SukiAuthManager({
partnerId: "f80c8db8-a4d0-4b75-8d63-56c82b5413f0", // Replace with your actual partnerId
partnerToken:
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.KMUFsIDTnFmyG3nMiGM6H9FNFUROf3wh7SmqJp-QV30", // Replace with your actual partnerToken
providerName: "John doe", // Replace with the full name of the provider
providerOrgId: "1234", // Replace with the provider's organization ID
environment: "production",
loginOnInitialize: true,
providerId: "1234567890", // Replace with the provider's ID
providerName: "John doe", // Replace with the full name of the provider
providerOrgId: "1234", // Replace with the provider's organization ID
providerSpecialty: "FAMILY_MEDICINE", // Replace with the provider's specialty
}),
[],
);
const { init, isInitialized } = useSuki();
const [isVisible, setIsVisible] = useState(true);
useEffect(() => {
if (!isInitialized) {
init({ authManager });
}
}, [init, isInitialized, authManager]);
const encounter = {
identifier: "encounter-789",
patient: {
identifier: "patient-101",
name: {
use: "usual",
family: "Johnson",
given: ["Sarah", "Marie"],
suffix: ["MD"],
},
birthDate: "1985-03-20",
gender: "female",
},
};
const uiOptions = { showCloseButton: true };
const ambientOptions = {
sections: [
{
loinc: "51847-2", // Assessment and Plan
isPBNSection: true,
},
{
loinc: "10164-2", // History of Present Illness
},
{
loinc: "10187-3", // Review of Systems
},
],
diagnoses: { // New in v2.1.2
values: [
{
codes: [
{
code: "I10",
description: "Essential hypertension",
type: "ICD10",
},
],
diagnosisNote: "Hypertension",
},
],
},
visitType: "ESTABLISHED_PATIENT", // New in v2.2.0
encounterType: "AMBULATORY",
providerRole: "PRIMARY/ATTENDING",
reasonForVisit: "Follow-up for hypertension",
chiefComplaint: "Headache",
};
const handleClose = () => {
setIsVisible(false);
console.log("SDK closed by user");
};
if (!isVisible) {
return <div>SDK has been closed</div>;
}
return (
<SukiAssistant
encounter={encounter}
uiOptions={uiOptions}
ambientOptions={ambientOptions}
onClose={handleClose}
onNoteSubmit={(data) => {
console.log(data);
}}
/>
);
}
This example shows how to control the visibility of the web SDK using the
onClose prop. When the showCloseButton is set to false, the onClose prop is not available.React
// When showCloseButton is false, onClose is not available
function ComponentWithoutCloseButton() {
const uiOptions = {
showCloseButton: false,
};
return (
<SukiAssistant
encounter={encounter}
uiOptions={uiOptions}
onNoteSubmit={(data) => {
console.log(data);
}}
// onClose={handleClose} // TypeScript error: Property 'onClose' does not exist
// rest of the props
/>
);
}