@visx/text
    TypeScript icon, indicating that this package has built-in type declarations

    2.12.2 • Public • Published

    @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
    

    Install

    npm i @visx/text

    DownloadsWeekly Downloads

    121,566

    Version

    2.12.2

    License

    MIT

    Unpacked Size

    28.7 kB

    Total Files

    23

    Last publish

    Collaborators

    • vx-hshoff
    • hshoff
    • christopher.card.williams
    • lencioni