UI Options

() => {
  const uiOptions = {
    fontSize: 20, // default 20
    defaultSvgPadding: 10, // default 10
    spaceBetweenTextAndSvg: 10, // default 6
    svgWidth: 5, // default 3
    spaceBetweenSvgs: 2, // default 2
    spaceBeforeNextLine: 10, // default 10
    relationVerticalOffset: 10, // default 7
    relationHorizontalOffset: 5, // default 5
  }
  const [annotations, setAnnotations] = React.useState(sampleAnnotations)
  const [relations, setRelations] = React.useState(sampleRelations)
  return (
    <Annotator
      text={sampleText}
      annotations={annotations}
      relations={relations}
      onChangeAnnotations={setAnnotations}
      onChangeRelations={setRelations}
      uiOptions={uiOptions}
    />
  )
}