@nexbasira/react

React-kääre @nexbasira/embed:n ympärillä. Kaksi pintaa — pudotettava <NexBasiraSession>-komponentti yleiseen tapaukseen, plus useNexBasiraSession()-hook mukautettuihin asetteluihin.

Asennus

npm install @nexbasira/react @nexbasira/embed react

react ja @nexbasira/embed ovat peer-riippuvuuksia — niitä ei ole bundattu tähän pakettiin.

Komponentti

import { NexBasiraSession } from "@nexbasira/react";

function InspectionPage({ joinUrl }: { joinUrl: string }) {
  return (
    <NexBasiraSession
      sessionUrl={joinUrl}
      height="720px"
      onSessionComplete={(id) => navigate(`/inspections/${id}`)}
    />
  );
}

sessionUrl on kertakäyttöinen URL, jonka taustajärjestelmäsi saa sessions.invite():sta Node- / Python-SDK:ssa. Komponentti kiinnittää iframen ensimmäisellä renderöinnillä ja tuhoaa sen siististi irrotettaessa.

Imperatiivinen pääsy refin kautta

Käytä refiä, kun kenttäpuolen ohjaukset ovat iframen ulkopuolella (työkalupalkki komponentin yläpuolella, modaalilaukaisin jne.):

import { useRef } from "react";
import { NexBasiraSession, type NexBasiraSessionHandle } from "@nexbasira/react";

function Toolbar({ joinUrl }: { joinUrl: string }) {
  const session = useRef<NexBasiraSessionHandle>(null);
  return (
    <>
      <button onClick={() => session.current?.requestSnapshot()}>Capture</button>
      <button onClick={() => session.current?.openWhiteboard()}>Whiteboard</button>
      <button onClick={() => session.current?.endSession()}>End</button>
      <NexBasiraSession ref={session} sessionUrl={joinUrl} />
    </>
  );
}

Hook-variantti

Kun kääre-<div> ei sovi asetteluusi — vaikka haluat iframen flex-säiliöön sivupalkin kanssa — käytä hookia + kiinnitä palautettu ref omaan isäntäelementtiisi:

import { useNexBasiraSession } from "@nexbasira/react";

function CustomLayout({ joinUrl }: { joinUrl: string }) {
  const [containerRef, widget] = useNexBasiraSession({
    sessionUrl: joinUrl,
    onSessionComplete: (id) => navigate(`/inspections/${id}`),
  });

  return (
    <div className="grid grid-cols-[1fr_240px] gap-4">
      <div ref={containerRef} style={{ minHeight: 600 }} />
      <aside>
        <button onClick={() => widget.current?.requestSnapshot()}>Snap</button>
      </aside>
    </div>
  );
}

Elinkaari-callbackit pysyvät tuoreina renderöintien yli

Embed-widget luodaan kerran per sessionUrl. Varmistaaksemme, että callbackisi näkevät aina viimeisimmän sulkeuman (sulkeutuen viimeisimmän tilan ympärille), kääre tallentaa ne sisäisesti useRefiin ja lukee uudelleen jokaisessa tapahtumassa. Voit välittää inline-nuolifunktioita turvallisesti:

function Page() {
  const [count, setCount] = useState(0);
  return (
    <NexBasiraSession
      sessionUrl={joinUrl}
      onEvidenceAdded={() => {
        // 'count' is always the latest value, not the value at mount
        setCount(count + 1);
      }}
    />
  );
}

Milloin iframe rakennetaan uudelleen?

Vain kun sessionUrl muuttuu. Jokainen muu prop (callbackit, width, height, expectedOrigin) sovelletaan paikallaan ilman uudelleenkiinnitystä. Tämä tarkoittaa, että callbackin muuttaminen tai isännän koon muuttaminen ei käynnistä live-istuntoa uudelleen — hyödyllistä kun sovelluksesi renderöityy usein uudelleen.

Propsit

Tyypitetty kahva

import type { NexBasiraSessionHandle } from "@nexbasira/react";

const ref = useRef<NexBasiraSessionHandle>(null);
// ref.current has typed methods: requestSnapshot(), openWhiteboard(), etc.

Mitä seuraavaksi

• @nexbasira/embed — taustalla oleva widget
• @nexbasira/node — muodosta sessionUrl taustajärjestelmässäsi
• Lähdekoodi GitHubissa