# react-svg-text

> ## Features - Word-wrapping (when `width` prop is defined) - Vertical alignment (`verticalAnchor` prop) - Rotation (`angle` prop) - Scale-to-fit text (`scaleToFit` prop)

Latest version **0.1.2** (published 2017-10-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-svg-text
pnpm add react-svg-text
yarn add react-svg-text
bun add react-svg-text
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2017-10-02 |
| First published | 2017-10-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 22 |
| Maintainers | techniq |

## Links

- npm: https://www.npmjs.com/package/react-svg-text
- Repository: https://github.com/techniq/react-svg-text
- Homepage: https://techniq.github.io/react-svg-text/
- Issues: https://github.com/techniq/react-svg-text/issues
- npm.io page: https://npm.io/package/react-svg-text

## Dependencies (3)

- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10
- [lodash.memoize](https://npm.io/package/lodash.memoize.md) ^4.1.2
- [reduce-css-calc](https://npm.io/package/reduce-css-calc.md) 1.3.0

## Recent versions

- 0.1.2 (latest) — 2017-10-02
- 0.1.1 — 2017-10-02
- 0.1.0 — 2017-10-01

## README

# Better SVG text component for React

## 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 not visible.  By using `<Text>` with `verticalAnchor="start"` prop, the text will now be visible as you'd expect.
```jsx
import React from 'react';
import { render } from 'react-dom';
import Text from 'react-svg-text';

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

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

See [demo](https://techniq.github.io/react-svg-text/) to see additional props and how they work

### Props
Property | Type | Default | Description
-------- | ---- | ------- | -----------
`x` | number | | x coordinate to use as a basis for positioning the text element
`y` | number | | y coordinate to use as a basis for positioning the text element
`dx` | number | | Horizontal shift from the x coordinate
`dy` | number | | Vertical shift from the y coordinate
`width` | number | | Width of text container.  Used to implement word wrapping and for context when `scaleToFit` is true
`scaleToFit` | bool | false | Resize text to fit container width
`angle` | number | | Rotate text around origin (defined by `textAnchor` and `verticalAnchor`)
`textAnchor` | string | start | How the text is horizontally positioned relative to the given `x` and `y` coordinates. Options are `start`, `middle`, `end`, and `inherit`.
`verticalAnchor` | string | end | How text is vertically positioned relative to the given `x` and `y` coordinates. Options are `start`, `middle`, `end`
`lineHeight` | string | 1em | How much space a single line of text should take up
`capHeight` | string | 0.71em (Magic number from d3) | Defines a text metric for the font being used: the expected height of capital letters. This is necessary because of SVG, which (a) positions the bottom of the text at y, and (b) has no notion of line height. This prop should be given as a number of ems
additional props | | | Additional props are passed down to underlying `<text>` component, including `style` and `className`

## TODO
- Fix tests (jsdom does not support `getComputedTextLength()` or `getBoundingClientRect()`) and setup CI
  - Consider using [jest-electron-runner](https://github.com/d4rkr00t/jest-electron-runner), although it currently hangs.  Seems to be a [known issue](https://github.com/d4rkr00t/jest-electron-runner/issues/5)

---
_Source: https://npm.io/package/react-svg-text · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._