@vx/text

The @vx/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 '@vx/text';

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

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

Installation

npm install --save @vx/text

Examples

Components

APIs

#<Text />

# Text.anglenumberoptional

Rotational angle of the text.

# Text.capHeightReactTextoptional

Cap height of the text.

Default 0.71em

# Text.childrenReactNodeoptional

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

# Text.classNamestringoptional

className to apply to the SVGText element.

# Text.dxReactTextoptional

dx offset of the text.

Default 0

# Text.dyReactTextoptional

dy offset of the text.

Default 0

# Text.fillstringoptional

Fill color of text.

# Text.fontFamilystringoptional

Font family of text.

# Text.fontSizeReactTextoptional

Font size of text.

# Text.innerRefRef<SVGSVGElement>optional

Ref passed to the Text SVG element.

# Text.lineHeightReactTextoptional

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

Default 1em

# Text.scaleToFitbooleanoptional

Whether to scale the fontSize to accomodate the specified width.

Default false

# Text.styleCSSPropertiesoptional

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

# Text.textAnchor"end" | "middle" | "inherit" | "start"optional

Horizontal text anchor.

Default start

# Text.verticalAnchor"end" | "middle" | "start"optional

Vertical text anchor.

Default end

# Text.widthnumberoptional

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

# Text.xReactTextoptional

x position of the text.

Default 0

# Text.yReactTextoptional

y position of the text.

Default 0