@mdb-devx/papercuts-widget NPM

Papercuts Widget

import { Widget } from "@mdb-devx/papercuts-widget";

The Widget component allows end users to submit reports directly to Papercuts with the following metadata:

The application name, provided by the appName prop
The current URL

An example:

// somewhere.tsx
import { Widget } from "@mdb-devx/papercuts-widget";

function Somewhere() {
  return <Widget appName="myapp" />;
}

Props

import type { ComponentProps } from "react";

export type WidgetProps = Pick<ComponentProps<"section">, "className"> & {
  appName: string; // application name to attach to reports
  onError?: (res: Response) => Promise<void> | void; // Optional callback
  onSuccess?: (res: Response) => Promise<void> | void; // Optional callback
  postUrl?: string; // Optional, if POST requires a proxy
};

Custom Metadata

The WidgetDefaultsProvider component is optional, but provides a React context to set custom metadata attached to Papercuts reports:

// _app.tsx
import type { PropsWithChildren } from "react";
import { Widget, WidgetDefaultsProvider } from "@mdb-devx/papercuts-widget";

export function App({ children }: PropsWithChildren) {
  return (
    <WidgetDefaultsProvider>
      {children}

      <Widget appName="myapp" />
    </WidgetDefaultsProvider>
  );
}

Somewhere else:

// component.tsx
import { useEffect } from "react";
import { useSetWidgetDefaults } from "@mdb-devx/papercuts-widget";

export default function Component() {
  const setWidgetDefaults = useSetWidgetDefaults();

  useEffect(() => {
    const newMetadata = {
      // define your new metadata here
    };

    setWidgetDefaults({ metadata: newMetadata });
  }, [setWidgetDefaults]);

  // rest of your component
}