Negligible Psychological Misery

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

    2.3.0 • 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';
    import { render } from 'react-dom';
    import { Text } from '@visx/text';
    
    const App = () => (
      <svg>
        <Text verticalAnchor="start">Hello world</Text>
      </svg>
    );
    
    render(<App />, document.getElementById('root'));

    Installation

    npm install --save @visx/text
    

    Install

    npm i @visx/text

    DownloadsWeekly Downloads

    87,332

    Version

    2.3.0

    License

    MIT

    Unpacked Size

    28.6 kB

    Total Files

    23

    Last publish

    Collaborators

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