@visx/text

Basic Text Rendering

This feature allows you to render basic text within an SVG element. You can specify the position, font size, and color of the text.

import { Text } from '@visx/text';

function BasicText() {
  return (
    <svg width={500} height={500}>
      <Text x={100} y={100} fontSize={16} fill="black">
        Hello, VisX!
      </Text>
    </svg>
  );
}

Text Wrapping

This feature allows you to wrap text within a specified width. This is useful for ensuring that long text strings fit within a given space.

import { Text } from '@visx/text';

function WrappedText() {
  return (
    <svg width={500} height={500}>
      <Text x={10} y={10} width={200} fontSize={16} fill="black">
        This is a long text that will wrap within the specified width.
      </Text>
    </svg>
  );
}

Text Truncation

This feature allows you to truncate text that exceeds a specified width. This is useful for ensuring that text does not overflow its container.

import { Text } from '@visx/text';

function TruncatedText() {
  return (
    <svg width={500} height={500}>
      <Text x={10} y={10} width={100} fontSize={16} fill="black" verticalAnchor="start" truncate>
        This is a long text that will be truncated.
      </Text>
    </svg>
  );
}

Text Alignment

This feature allows you to align text both horizontally and vertically within an SVG element. This is useful for centering text or aligning it to specific points.

import { Text } from '@visx/text';

function AlignedText() {
  return (
    <svg width={500} height={500}>
      <Text x={250} y={250} fontSize={16} fill="black" textAnchor="middle" verticalAnchor="middle">
        Centered Text
      </Text>
    </svg>
  );
}