open-index/open-npm huggingface dataset:
npm package: @mdb-devx/papercuts-widget
Description: ```typescript import { Widget } from "@mdb-devx/papercuts-widget"; ```
Latest version: 1.0.3

# Papercuts Widget

```typescript
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:

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

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

## Props

```typescript
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:

```typescript
// _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:

```typescript
// 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
}
```

## See your feedback...

To see the reports submitted via this widget, visit [Papercuts Search](https://papercuts.corps.prod.corp.mongodb.com/search).