@appnotes/react

React 19 wrapper for the embeddable AppNotes SDK.

import { AppNotes } from "@appnotes/react";

export function SupportTools({ account }: { account: { id: string; name: string } }) {
  return (
    <AppNotes
      projectKey="appnotes_pk_example"
      roomId={account.id}
      roomName={account.name}
    />
  );
}

For self-hosted deployments, pass the same explicit transport boundary as the framework-agnostic SDK:

<AppNotes
  projectKey="appnotes_pk_example"
  roomId={account.id}
  endpoints={{
    apiUrl: "https://notes.example.com/api",
    realtimeUrl: "wss://notes.example.com/api/realtime",
  }}
/>

The component creates containers for the trigger and drawer, updates the room and page when props change, and destroys the SDK when it unmounts. roomId remains the stable key used for data isolation and filtering, while the optional roomName is displayed in the drawer header and dashboard room filter. When roomName is not provided, the UI falls back to roomId.