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.

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.
• 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

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. The tool itself is set with useSetInteractionMode.