React and Next.js

Install

npm install sightingdev

Create a client component

'use client';

import { useEffect } from 'react';
import { createFeedback } from 'sightingdev';

export function SightingWidget() {
  useEffect(() => {
    const feedback = createFeedback({ endpoint: '/api/feedback' });
    feedback.mount();
    return () => feedback.destroy();
  }, []);

  return null;
}

Render <SightingWidget /> once near your app root. React effect cleanup removes the UI and aborts pending uploads when the component unmounts. It also supports React Strict Mode’s development remounts.

Next.js App Router

Keep 'use client' at the top of the widget file. Import the widget into your layout or page; the rest of the layout can remain a Server Component. The import is SSR-safe, but UI and capture methods need a browser.

import { SightingWidget } from './SightingWidget';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <SightingWidget />
      </body>
    </html>
  );
}

Connect your backend

Implement /api/feedback or set endpoint to your receiving API. The package does not create a Next.js route or storage. Follow the multipart server contract.

Uploads omit cookies, even on the same origin. If your endpoint needs authentication, use an appropriate short-lived client token in headers; keep privileged keys on the server.

For an existing feedback button, use the custom React trigger instead of calling mount().

⌘I

Start here

Integrate

Reference

React and Next.js

Install

Create a client component

Next.js App Router

Connect your backend

​Install

​Create a client component

​Next.js App Router

​Connect your backend

Install

Create a client component

Next.js App Router

Connect your backend