Chart primitives

Layouts & specialized

Interactions

SVG utilities

Data utilities

Umbrella package

visx

@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

Examples

Flexible SVG Text

Text

<Text.Text />

APIs

#<Text />

# anglenumber

Rotational angle of the text.

# capHeightReactText

Cap height of the text.

# childrenReactText

String (or number coercible to one) to be styled and positioned.

# classNamestring

className to apply to the SVGText element.

# dxReactText

dx offset of the text.

# dyReactText

dy offset of the text.

# fillstring

Fill color of text.

# fontFamilystring

Font family of text.

# fontSizeReactText

Font size of text.

# innerRefRef<SVGSVGElement>

Ref passed to the Text SVG element.

# innerTextRefRef<SVGTextElement>

Ref passed to the Text text element

# lineHeightReactText

Desired "line height" of the text, implemented as y offsets.

# scaleToFitboolean | "shrink-only"

Whether to scale the fontSize to accommodate the specified width.

# styleCSSProperties

Styles to be applied to the text (and used in computation of its size).

# textAnchor"end" | "middle" | "inherit" | "start"

Horizontal text anchor.

# verticalAnchor"end" | "middle" | "start"

Vertical text anchor.

# widthnumber

Maximum width to occupy (approximate as words are not split).

# xReactText

x position of the text.

# yReactText

y position of the text.

Exports

<Text />