react-pdf-highlighter-plus

Interface AreaHighlightProps

The props type for AreaHighlight.

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

Properties

bounds? colorPresets? deleteIcon? highlight highlightColor? isScrolledTo? style? styleIcon?

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 deleteIcon

deleteIcon?: ReactNode

Custom delete icon. Replaces the default trash icon.

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.

Optional styleIcon

styleIcon?: ReactNode

Custom style icon. Replaces the default palette icon.

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