@vx/text

@vx/text

npm install --save @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 'react-svg-text';

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

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

Props

Property	Type	Default	Description
x	number		x coordinate to use as a basis for positioning the text element
y	number		y coordinate to use as a basis for positioning the text element
dx	number		Horizontal shift from the x coordinate
dy	number		Vertical shift from the y coordinate
width	number		Width of text container. Used to implement word wrapping and for context when scaleToFit is true
scaleToFit	bool	false	Resize text to fit container width
angle	number		Rotate text around origin (defined by textAnchor and verticalAnchor)
textAnchor	string	start	How the text is horizontally positioned relative to the given x and y coordinates. Options are start, middle, end, and inherit.
verticalAnchor	string	end	How text is vertically positioned relative to the given x and y coordinates. Options are start, middle, end
lineHeight	string	1em	How much space a single line of text should take up
capHeight	string	0.71em (Magic number from d3)	Defines a text metric for the font being used: the expected height of capital letters. This is necessary because of SVG, which (a) positions the bottom of the text at y, and (b) has no notion of line height. This prop should be given as a number of ems
additional props			Additional props are passed down to underlying <text> component, including style and className

Changelog

v0.0.152

:rocket: Enhancements

• [text] add fontWeight option to vx-text demo #215

:memo: Documentation

• [demo] add vx-text tile and update /text demo #214
• [responsive] add description and example of each component and enhancer #217

:bug: Bug Fix

• [text] fix memoized getStringWidth ignoring styles #215
• [text] remove default width and height from measurement SVG #219
• [scale] fix scalePower api to take in exponent instead of base #223

:house: Internal

• [travis] fix for travis failing for timing out when not receiving output for 10min #224
• [vx][test] fix @vx/vx text test. It was looking for TextOutline export which was removed with the new @vx/text #224
• [axis] bump prop-types dep and use ^ #224

:trophy: Contributors

• techniq
• hshoff
• katerineknox
• crcarlo

Changes:
 - @vx/axis: 0.0.151 => 0.0.152
 - @vx/demo: 0.0.151 => 0.0.152
 - @vx/responsive: 0.0.151 => 0.0.152
 - @vx/scale: 0.0.151 => 0.0.152
 - @vx/stats: 0.0.151 => 0.0.152
 - @vx/text: 0.0.151 => 0.0.152
 - @vx/vx: 0.0.151 => 0.0.152