@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';
import { render } from 'react-dom';
import { Text } from '@visx/text';

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

render(<App />, document.getElementById('root'));

Installation

npm install --save @visx/text

Examples

APIs

#<Text />

# anglenumber | undefined

Rotational angle of the text.

# capHeightstring | number | undefined

Cap height of the text.

# childrenstring | number | undefined

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

# classNamestring | undefined

className to apply to the SVGText element.

# dxstring | number | undefined

dx offset of the text.

# dystring | number | undefined

dy offset of the text.

# fillstring | undefined

Fill color of text.

# fontFamilystring | undefined

Font family of text.

# fontSizestring | number | undefined

Font size of text.

# innerRef((instance: SVGSVGElement | null) => void) | RefObject<SVGSVGElement> | null | undefined

Ref passed to the Text SVG element.

# innerTextRef((instance: SVGTextElement | null) => void) | RefObject<SVGTextElement> | null | undefined

Ref passed to the Text text element

# lineHeightstring | number | undefined

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

# scaleToFitboolean | undefined

Whether to scale the fontSize to accommodate the specified width.

# styleCSSProperties | undefined

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

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

Horizontal text anchor.

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

Vertical text anchor.

# widthnumber | undefined

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

# xstring | number | undefined

x position of the text.

# ystring | number | undefined

y position of the text.

Exports