# @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 '@vx/text';

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

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

## Installation

    npm install --save @vx/text

## Components

- Text

## API

### <Text />

# Text.angle<number>

# Text.capHeight<union(number|string)>

Default | '0.71em'

# Text.dx<union(number|string)>

Default | 0

# Text.dy<union(number|string)>

Default | 0

# Text.innerRef<func>

# Text.lineHeight<union(number|string)>

Default | '1em'

# Text.scaleToFit<bool>

Default | false

# Text.style<object>

# Text.textAnchor<enum('start'|'middle'|'end'|'inherit')>

Default | 'start'

# Text.verticalAnchor<enum('start'|'middle'|'end')>

Default | 'end'

# Text.x<union(number|string)>

Default | 0

# Text.y<union(number|string)>

Default | 0