@visx/text/esm/Text.js

visx text

import useText from "./hooks/useText.js";
import { jsx as _jsx } from "react/jsx-runtime";
const SVG_STYLE = {
  overflow: 'visible'
};
export default function Text(props) {
  const {
    dx = 0,
    dy = 0,
    textAnchor = 'start',
    innerRef,
    innerTextRef,
    verticalAnchor,
    angle,
    lineHeight = '1em',
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    scaleToFit = false,
    capHeight,
    width,
    ...textProps
  } = props;
  const {
    x = 0,
    fontSize
  } = textProps;
  const {
    wordsByLines,
    startDy,
    transform
  } = useText(props);
  return /*#__PURE__*/_jsx("svg", {
    ref: innerRef,
    x: dx,
    y: dy,
    fontSize: fontSize,
    style: SVG_STYLE,
    children: wordsByLines.length > 0 ? /*#__PURE__*/_jsx("text", {
      ref: innerTextRef,
      transform: transform,
      ...textProps,
      textAnchor: textAnchor,
      children: wordsByLines.map((line, index) => /*#__PURE__*/_jsx("tspan", {
        x: x,
        dy: index === 0 ? startDy : lineHeight,
        children: line.words.join(' ')
      }, index))
    }) : null
  });
}