# WidgetPreview

Source: https://sdk.pdf.net/docs/v1/reference/WidgetPreview



The box that follows the cursor while the `{ type: 'addWidget' }` interaction tool is active, showing where the new widget will land. Replace it through the theme's `components.widgetPreview`, and render `WidgetPreview` inside your replacement to keep the built-in look for some widget types.

| Prop                                        | Type                            | What it does                                                                                    |
| ------------------------------------------- | ------------------------------- | ----------------------------------------------------------------------------------------------- |
| `x`, `y`                                    | `number`                        | The top-left corner of the future widget, in CSS pixels relative to the page.                   |
| `width`, `height`                           | `number`                        | The size of the future widget, in CSS pixels at the current scale.                              |
| `widgetProps`                               | `InteractionToolAddWidgetProps` | The props of the widget being placed, as passed to the interaction tool: `widgetType` and more. |
| `className`, `style`, and other `div` props |                                 | Forwarded to the preview element.                                                               |

## Behavior [#behavior]

* The preview renders inside the page under the cursor, and positions itself from `x` and `y`.
* The built-in preview draws a dashed outline in `--selection-color` over the `--widget-overlay-background` fill, and a circle for radio buttons. See [Theming and customization](https://sdk.pdf.net/docs/v1/guides/theming-and-customization).
* A replacement receives the same props. The `className` and `style` it receives carry the theme's `classNames.widgetPreview` and `styles.widgetPreview`, so forward them to the root element.

## Example [#example]

```tsx
import { ComponentProps } from 'react'
import { Config, WidgetPreview } from '@sdk-pdf/react'

function MyWidgetPreview(props: ComponentProps<typeof WidgetPreview>) {
  if (props.widgetProps.widgetType !== 'signature') return <WidgetPreview {...props} />

  const { x, y, width, height, widgetProps, style, ...divProps } = props
  return (
    <div
      {...divProps}
      style={{
        position: 'absolute',
        transform: `translate(${x}px, ${y}px)`,
        width,
        height,
        ...style,
      }}
    >
      Sign here
    </div>
  )
}

// Defined outside the component, so the configuration stays referentially stable.
const theme: Config['theme'] = {
  components: { widgetPreview: MyWidgetPreview },
}
```

The theme is passed to [PdfProviders](https://sdk.pdf.net/docs/v1/reference/PdfProviders). The tool itself is set with [useSetInteractionMode](https://sdk.pdf.net/docs/v1/reference/useSetInteractionMode).