react-pdf-highlighter-plus

Interface AreaHighlightProps

The props type for AreaHighlight.

interface AreaHighlightProps {
    bounds?: string | Element;
    colorPresets?: string[];
    copyText?: string;
    deleteIcon?: ReactNode;
    extraButtons?: ReactNode;
    extraPanel?: ReactNode;
    highlight: ViewportHighlight;
    highlightColor?: string;
    isScrolledTo?: boolean;
    style?: CSSProperties;
    onChange?(rect): void;
    onContextMenu?(event): void;
    onDelete?(): void;
    onEditStart?(): void;
    onStyleChange?(style): void;
}

Properties

bounds? colorPresets? copyText? deleteIcon? extraButtons? extraPanel? highlight highlightColor? isScrolledTo? style?

Methods

onChange? onContextMenu? onDelete? onEditStart? onStyleChange?

Properties

Optional bounds

bounds?: string | Element

react-rnd bounds on the highlight area. This is useful for preventing the user moving the highlight off the viewer/page. See react-rnd docs.

Optional colorPresets

colorPresets?: string[]

Custom color presets for the style panel. Default: ["rgba(255, 226, 143, 1)", "#ffcdd2", "#c8e6c9", "#bbdefb", "#e1bee7"]

Optional copyText

copyText?: string

Text to copy for this area highlight.

Optional deleteIcon

deleteIcon?: ReactNode

Custom delete icon. Replaces the default trash icon.

Optional extraButtons

extraButtons?: ReactNode

Extra buttons rendered in the same toolbar row, after the copy button. Use this to add consumer-defined actions (e.g. a comment toggle) without needing a second, separate popup.

Optional extraPanel

extraPanel?: ReactNode

Extra content rendered below the toolbar row, in the same slot as the built-in style panel (e.g. a comment editor opened by an extraButtons toggle).

highlight

highlight: ViewportHighlight

The highlight to be rendered as an AreaHighlight.

Optional highlightColor

highlightColor?: string

Background color for the highlight. Default: "rgba(255, 226, 143, 1)" (yellow)

Optional isScrolledTo

isScrolledTo?: boolean

Has the highlight been auto-scrolled into view? By default, this will render the highlight red.

Optional style

style?: CSSProperties

Custom styling to be applied to the AreaHighlight component.

Methods

Optional onChange

  • onChange(rect): void

  • A callback triggered whenever the highlight area is either finished being moved or resized.

    Parameters

    • rect: LTWHP

      The updated highlight area.

    Returns void

Optional onContextMenu

  • onContextMenu(event): void

  • A callback triggered whenever a context menu is opened on the highlight area.

    Parameters

    • event: MouseEvent<HTMLDivElement, MouseEvent>

      The mouse event associated with the context menu.

    Returns void

Optional onDelete

Optional onEditStart

Optional onStyleChange