@goodcraft/feedback-widget-react
v1.2.1
Published
React component wrapper for the feedback widget
Maintainers
nathanworkingReadme
@goodcraft/feedback-widget-react
React components for the feedback widget. Wraps @goodcraft/feedback-widget-core in React components with context and hooks.
Install
pnpm add @goodcraft/feedback-widget-reactPeer dependencies: react >= 17, react-dom >= 17
Basic Usage
Drop <FeedbackWidget> into your root layout. It renders a floating trigger button and handles the modal lifecycle.
import { FeedbackWidget } from '@goodcraft/feedback-widget-react';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<FeedbackWidget
endpoint="/api/feedback"
projectSlug="my-app"
/>
</body>
</html>
);
}<FeedbackWidget> Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| endpoint | string | required | API endpoint URL for submissions |
| projectSlug | string | required | Project identifier |
| sessionId | string | — | Session ID for BetterStack correlation |
| betterStackTeamId | string | — | BetterStack team ID for deep links |
| position | 'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left' | 'bottom-right' | Trigger button position |
| zIndex | number | 999999 | z-index for widget elements |
| onSuccess | (response: SubmissionResponse) => void | — | Success callback |
| onError | (error: Error) => void | — | Error callback |
| customTrigger | boolean | false | Hide the built-in trigger button |
| children | ReactNode | — | Custom trigger content (implies customTrigger) |
Custom Trigger with Provider
Use <FeedbackWidgetProvider> when you want to control the trigger yourself:
import {
FeedbackWidgetProvider,
FeedbackTrigger,
} from '@goodcraft/feedback-widget-react';
function App() {
return (
<FeedbackWidgetProvider endpoint="/api/feedback" projectSlug="my-app">
<main>
<h1>My App</h1>
<FeedbackTrigger type="bug">Report a Bug</FeedbackTrigger>
<FeedbackTrigger type="feature">Request Feature</FeedbackTrigger>
</main>
</FeedbackWidgetProvider>
);
}<FeedbackTrigger> Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| type | 'bug' \| 'feature' | — | Pre-selects the submission type |
| children | ReactNode | Auto-generated label | Button content |
| className | string | — | CSS class |
| ...props | ButtonHTMLAttributes | — | Passed to the underlying <button> |
useFeedbackWidget() Hook
Access widget methods from anywhere inside a provider:
import { useFeedbackWidget } from '@goodcraft/feedback-widget-react';
function MyButton() {
const { open, close, isReady } = useFeedbackWidget();
return (
<button onClick={() => open('bug')} disabled={!isReady}>
Report Bug
</button>
);
}Return value
| Property | Type | Description |
|----------|------|-------------|
| open | (type?: 'bug' \| 'feature') => void | Opens the modal |
| close | () => void | Closes the modal |
| isReady | boolean | true after the widget has initialized |
Re-exported from Core
All types and utilities from @goodcraft/feedback-widget-core are re-exported for convenience:
- Types:
FeedbackWidgetConfig,SubmissionResponse,SubmissionType,FeedbackSubmission,SystemInfo,ConsoleError - Utilities:
initErrorCollection,getConsoleErrors,getSystemInfo,generateBetterStackLink,captureScreenshot
License
MIT