/vx-text

Primary LanguageJavaScript

@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

Components

API

<Text />

# Text.angle<number>

# Text.capHeight<union(number|string)>

Default'0.71em'

# Text.dx<union(number|string)>

Default0

# Text.dy<union(number|string)>

Default0

# Text.innerRef<union(func|object)>

# Text.lineHeight<union(number|string)>

Default'1em'

# Text.scaleToFit<bool>

Defaultfalse

# Text.style<object>

# Text.textAnchor<enum('start'|'middle'|'end'|'inherit')>

Default'start'

# Text.verticalAnchor<enum('start'|'middle'|'end')>

Default'end'

# Text.x<union(number|string)>

Default0

# Text.y<union(number|string)>

Default0