@nexbasira/react

Wrapper React γύρω από το @nexbasira/embed. Δύο επιφάνειες — ένα έτοιμο component <NexBasiraSession> για τη συνήθη περίπτωση, καθώς και ένα hook useNexBasiraSession() για προσαρμοσμένες διατάξεις.

Εγκατάσταση

npm install @nexbasira/react @nexbasira/embed react

Τα react και @nexbasira/embed είναι peer dependencies — δεν συμπεριλαμβάνονται στο πακέτο.

Component

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

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

Το sessionUrl είναι το URL μιας χρήσης που επιστρέφει το backend σας από το sessions.invite() στο Node / Python SDK. Το component προσαρτά το iframe κατά την πρώτη απόδοση και το καταστρέφει καθαρά κατά την αποπροσάρτηση.

Επιτακτική πρόσβαση μέσω ref

Χρησιμοποιήστε ένα ref όταν τα χειριστήρια της πλευράς πεδίου βρίσκονται εκτός του iframe (γραμμή εργαλείων πάνω από το component, ενεργοποίηση modal κ.λπ.):

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

Όταν το wrapper <div> δεν ταιριάζει στη διάταξή σας — π.χ. θέλετε το iframe σε flex container με πλαϊνή στήλη — χρησιμοποιήστε το hook και προσαρτήστε το επιστρεφόμενο ref στο δικό σας 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>
  );
}

Τα callbacks κύκλου ζωής παραμένουν ενημερωμένα σε όλες τις αποδόσεις

Το widget ενσωμάτωσης δημιουργείται μία φορά ανά sessionUrl. Για να διασφαλιστεί ότι τα callbacks σας βλέπουν πάντα το πιο πρόσφατο closure (καλύπτοντας την πιο πρόσφατη κατάσταση), το wrapper τα αποθηκεύει εσωτερικά σε ένα useRef και τα επαναδιαβάζει σε κάθε συμβάν. Μπορείτε να περνάτε με ασφάλεια inline arrow functions:

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

Πότε αναδομείται το iframe;

Μόνο όταν αλλάζει το sessionUrl. Κάθε άλλο prop (callbacks, width, height, expectedOrigin) εφαρμόζεται επιτόπου χωρίς επαναπροσάρτηση. Αυτό σημαίνει ότι η αλλαγή ενός callback ή η αλλαγή μεγέθους του host δεν επανεκκινεί τη ζωντανή συνεδρία — χρήσιμο όταν η εφαρμογή σας αποδίδεται συχνά ξανά.

Props

Typed handle

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

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

Τι ακολουθεί

• @nexbasira/embed — το υποκείμενο widget
• @nexbasira/node — δημιουργήστε το sessionUrl στο backend σας
• Πηγαίος κώδικας στο GitHub