> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sighting.dev/llms.txt
> Use this file to discover all available pages before exploring further.
# React and Next.js
> Add the feedback widget with lifecycle cleanup.
## Install
```bash theme={null}
npm install sightingdev
```
## Create a client component
```jsx theme={null}
'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 `` 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.
```jsx theme={null}
import { SightingWidget } from './SightingWidget';
export default function RootLayout({ children }) {
return (
{children}
);
}
```
## 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](/server).
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](/integrations#react-with-a-custom-trigger) instead of calling `mount()`.