Data utilities
Umbrella package
@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
<Text.Text />
APIs
#<Text />
number
Rotational angle of the text.
ReactText
Cap height of the text.
ReactText
String (or number coercible to one) to be styled and positioned.
string
className to apply to the SVGText element.
ReactText
dx offset of the text.
ReactText
dy offset of the text.
string
Fill color of text.
string
Font family of text.
ReactText
Font size of text.
Ref<SVGSVGElement>
Ref passed to the Text SVG element.
Ref<SVGTextElement>
Ref passed to the Text text element
ReactText
Desired "line height" of the text, implemented as y offsets.
boolean | "shrink-only"
Whether to scale the fontSize to accommodate the specified width.
CSSProperties
Styles to be applied to the text (and used in computation of its size).
"end" | "middle" | "inherit" | "start"
Horizontal text anchor.
"end" | "middle" | "start"
Vertical text anchor.
number
Maximum width to occupy (approximate as words are not split).
ReactText
x position of the text.
ReactText
y position of the text.