# stroked-text

> Easy, cross-browser stroked text using SVG elements, written in TypeScript

Latest version **1.0.0** (published 2020-08-23) · ISC license · 0 weekly downloads

## Install

```sh
npm install stroked-text
pnpm add stroked-text
yarn add stroked-text
bun add stroked-text
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2020-08-23 |
| First published | 2020-08-23 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 42.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Splox |
| Maintainers | splox |
| Keywords | stroked, text, html, dom |

## Links

- npm: https://www.npmjs.com/package/stroked-text
- Repository: https://github.com/SploxFox/StrokedText
- Homepage: https://github.com/SploxFox/StrokedText#readme
- Issues: https://github.com/SploxFox/StrokedText/issues
- npm.io page: https://npm.io/package/stroked-text

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^16.13.1
- [react-dom](https://npm.io/package/react-dom.md) ^16.13.1
- [@types/react](https://npm.io/package/@types/react.md) ^16.9.46
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^16.9.8

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2020-08-23

## README

# stroked-text
### Easy stroked text in React using SVGs, written in TypeScript

## Usage
```
import { StrokedText } from 'stroked-text';

<StrokedText fill='lightblue' stroke='purple' strokeWidth={10} style={{
    font: 'bold 40px sans-serif',
}}>Example text!</StrokedText>
```
Result:

![Stroked example text](./example.png)

## Props
*All properties are optional.*
### `style: React.CSSProperties`
The CSS style of the `SVG` element. In most cases, you can put the styling for your text here.

### `children: string`
The `children` prop is just what's in between the opening and closing `StrokedText` tags. It's the text that gets stroked.

### `stroke: string`
The CSS `stroke` style. It's the color of the stroke.

### `strokeWidth: number`
The width of the stroke, in pixels.

### `fill: string`
The fill color of the text.

### `paintOrder: string`
What order to paint the stroke and fill in. For example, `'stroke fill'` (default) will put the text fill over the stroke, and `'fill stroke'` will put the stroke on top of the text. Same as the `paint-order` CSS property. Doesn't work in IE (IE will always show `fill stroke`)

#### `stroke fill`
![Stroke fill example](./example-stroke-fill.png)

#### `fill stroke`
![Stroke fill example](./example-fill-stroke.png)

### `textStyle: React.CSSProperties`
The text styling to put on the actual `SVG` `text` element. Most of the time, you won't have to use this.

### `textClassName: string`
The CSS class name to apply to the text

### `className: string`
The CSS class name to apply to the whole SVG element

## Example project
https://github.com/SploxFox/StrokedTextExample
## Notes
* Text does not wrap -- you would have to simulate this yourself
* Text is highlightable and everything
* On some browsers, the text's stroke may extend outside of the element's bounding box
* The element may be slightly different sizes across different browsers even if the font size is the same

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