Papercuts Widget

Install

npm install papercuts-widget react react-dom

Styles

In Next projects, add to pages/_app.[j,t]sx:

import "papercuts-widget/dist/style.css";

As HTML:

<link rel="stylesheet" href="/location/to/papercuts-widget/dist/style.css" />

Component

import type { PropsWithChildren } from "react";
import { Widget, WidgetDefaultsProvider } from "papercuts-widget";

export function AppContext({ children }: PropsWithChildren) {
  return (
    <WidgetDefaultsProvider>
      {children}
      <Widget appName="" viewUrl="" />
    </WidgetDefaultsProvider>
  );
}

Props

import type { ComponentProps } from "react";
export type WidgetProps = Pick<ComponentProps<"section">, "className"> & {
  appName: string; // what app is causing problems
  onError?: (res: Response) => Promise<void> | void;
  onSuccess?: (res: Response) => Promise<void> | void;
  postUrl?: string; // Optional, if POST requires a proxy
  viewUrl: string; // Papercuts URL to view user reports
};