3.3.0 • Published 10 months ago
@visx/text v3.3.0
@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
3.3.0
10 months ago
2.17.0
1 year ago
3.0.0
1 year ago
2.17.0-alpha.0
1 year ago
2.12.2
2 years ago
2.10.0-alpha.0
2 years ago
2.10.0
2 years ago
2.3.0
3 years ago
2.1.2
3 years ago
2.1.1
3 years ago
2.1.0
3 years ago
2.0.1-alpha.0
3 years ago
3.0.0-alpha.0
3 years ago
1.17.1
3 years ago
1.10.0
3 years ago
1.7.0
3 years ago
1.6.1
3 years ago
1.3.0
3 years ago
1.3.0-alpha.0
3 years ago
1.1.0
4 years ago
1.0.0
4 years ago
0.0.200-alpha.0
4 years ago