https://github.com/techniq/react-svg-text
Better SVG text component for React
https://github.com/techniq/react-svg-text
Last synced: over 1 year ago
JSON representation
Better SVG text component for React
- Host: GitHub
- URL: https://github.com/techniq/react-svg-text
- Owner: techniq
- Created: 2017-09-13T03:23:30.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2018-04-10T14:03:53.000Z (over 8 years ago)
- Last Synced: 2024-10-30T07:26:59.955Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://techniq.github.io/react-svg-text/
- Size: 909 KB
- Stars: 22
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Better SVG text component for React
**Note: Merged into [vx](https://github.com/hshoff/vx) and is now [@vx/text](https://github.com/hshoff/vx/tree/master/packages/vx-text)**
## 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 `` itself does not support `verticalAnchor`, normally text rendered at `0,0` would be outside the viewport and not visible. By using `` 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 = () => (
Hello world
);
render(, 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 `` 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)