useSelectionAnnotationProps

Returns the border properties shared by the selected annotations and the functions for changing them.

const { isApplicable, borderColor, borderWidth } = useSelectionAnnotationProps()

• isApplicable is true when the selection contains at least one annotation that paints a border or a stroke (shapes, lines, ink, widgets); hide the controls otherwise.
• borderColor and borderWidth are selection props ({ value, set }, see useSelectionTextStyle for the pattern). The setters change every selected annotation with a border and skip the rest of the selection. For ink and lines, the border is the drawn stroke itself.
• borderColor.value is a ColorString ('rgba(r,g,b,a)'). borderColor.set accepts common CSS color formats and normalizes them, and throws InvalidInputError for an unsupported format. The border opacity is carried in the color's alpha channel.
• borderWidth is in user-space units.
• With no document loaded, the setters throw DocumentNotLoadedError.

To edit other properties of the selected widgets, read them with useSelectedBlocks and update them with useSetWidgetProps.

Example

import { useSelectionAnnotationProps } from '@sdk-pdf/react'

function BorderWidthInput() {
  const { isApplicable, borderWidth } = useSelectionAnnotationProps()

  if (!isApplicable) return null

  return (
    <input
      type="number"
      min={0}
      // An empty value means the selected annotations have different border widths.
      value={borderWidth.value ?? ''}
      onChange={(event) => borderWidth.set(Number(event.currentTarget.value))}
    />
  )
}