@nexbasira/react

React-wrapper rond @nexbasira/embed. Twee oppervlakken — een kant-en-klare <NexBasiraSession>-component voor het gangbare geval, plus een useNexBasiraSession()-hook voor aangepaste layouts.

Installeren

npm install @nexbasira/react @nexbasira/embed react

react en @nexbasira/embed zijn peer dependencies — ze worden niet met dit pakket meegebundeld.

Component

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

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

sessionUrl is de eenmalige URL die uw backend terugkrijgt van sessions.invite() op de Node- / Python-SDK. De component mount het iframe bij de eerste render en ruimt het netjes op bij unmount.

Imperatieve toegang via ref

Gebruik een ref wanneer de veldkant-controls buiten het iframe leven (toolbar boven de component, modal-trigger, enz.):

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-variant

Wanneer de wrapper-<div> niet in uw layout past — bijvoorbeeld als u het iframe in een flex-container met een sidebar wilt — gebruik dan de hook + koppel de geretourneerde ref aan uw eigen host-element:

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

Levenscyclus-callbacks blijven vers over renders heen

De embed-widget wordt één keer per sessionUrl aangemaakt. Om ervoor te zorgen dat uw callbacks altijd de laatste closure zien (die over de laatste state sluit), bewaart de wrapper ze intern in een useRef en leest ze bij elk event opnieuw. U kunt inline arrow functions veilig meegeven:

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);
      }}
    />
  );
}

Wanneer wordt het iframe opnieuw opgebouwd?

Alleen wanneer sessionUrl verandert. Elke andere prop (callbacks, width, height, expectedOrigin) wordt in-place toegepast zonder opnieuw te mounten. Dit betekent dat het wijzigen van een callback of het resizen van de host de live sessie niet herstart — handig wanneer uw app vaak opnieuw rendert.

Props

Getypeerde handle

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

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

Wat nu

• @nexbasira/embed — onderliggende widget
• @nexbasira/node — genereer de sessionUrl in uw backend
• Broncode op GitHub