@visx/text

What is @visx/text?

@visx/text is a part of the VisX library, which provides a collection of reusable low-level visualization components for React. The @visx/text package specifically focuses on rendering text elements with various configurations, such as wrapping, truncation, and alignment, making it easier to handle text in SVG elements.

What are @visx/text's main functionalities?

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>
  );
}

Other packages similar to @visx/text

react-textfit

react-textfit is a React component that automatically adjusts the font size of text to fit within a given container. Unlike @visx/text, which focuses on SVG text rendering, react-textfit is designed for general text fitting within HTML elements.

react-svg-text

react-svg-text is a React component for rendering text within SVG elements. It provides similar functionalities to @visx/text, such as text wrapping and alignment, but may not offer as many configuration options or integration with other visualization components.

react-text-truncate

react-text-truncate is a React component that truncates text with an ellipsis if it overflows its container. While @visx/text offers text truncation within SVG elements, react-text-truncate is designed for general use within HTML elements.

README

@visx/text

The @visx/text provides a better SVG <Text> component with the following features

• Word-wrapping (when width prop is defined)
• Vertical alignment (verticalAnchor prop)
• Rotation (angle prop)
• Scale-to-fit text (scaleToFit prop)

Example

Simple demo to show off a useful feature. Since svg <text> itself does not support verticalAnchor, normally text rendered at 0,0 would be outside the viewport and thus not visible. By using <Text> with the verticalAnchor="start" prop, the text will now be visible as you'd expect.

import React from 'react';
// note: react@18 syntax
import { createRoot } from 'react-dom/client';
import { Text } from '@visx/text';

const App = () => (
  <svg>
    <Text verticalAnchor="start">Hello world</Text>
  </svg>
);

const root = createRoot(document.getElementById('root'));

root.render(<App />);

Installation

npm install --save @visx/text