# textstyler

> Style your text

Latest version **1.1.3** (published 2017-12-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install textstyler
pnpm add textstyler
yarn add textstyler
bun add textstyler
```

## 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.1.3 |
| Published | 2017-12-01 |
| First published | 2017-11-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | jae.b.bradley@gmail.com |
| Maintainers | jaebradley |
| Keywords | text, highlight |

## Links

- npm: https://www.npmjs.com/package/textstyler
- Repository: https://github.com/jaebradley/textstyler
- Homepage: https://github.com/jaebradley/textstyler#readme
- Issues: https://github.com/jaebradley/textstyler/issues
- npm.io page: https://npm.io/package/textstyler

## Dependencies (1)

- [colors](https://npm.io/package/colors.md) ^1.1.2

## Alternatives

- [@oh-my-pi/pi-natives](https://npm.io/package/@oh-my-pi/pi-natives.md) — 51.8K weekly downloads
- [@capgo/capacitor-light-sensor](https://npm.io/package/@capgo/capacitor-light-sensor.md) — 3.0K weekly downloads
- [@heyhuynhgiabuu/pi-diff](https://npm.io/package/@heyhuynhgiabuu/pi-diff.md) — 492 weekly downloads
- [@lotsa/verdant-lang-asm](https://npm.io/package/@lotsa/verdant-lang-asm.md) — 38 weekly downloads
- [new-era-syntax](https://npm.io/package/new-era-syntax.md) — 20 weekly downloads

## Recent versions

- 1.1.3 (latest) — 2017-12-01
- 1.1.2 — 2017-12-01
- 1.1.1 — 2017-12-01
- 1.1.0 — 2017-12-01
- 1.0.0 — 2017-12-01
- 0.0.0-development — 2017-11-30

## README

# textstyler
[![Build Status](https://travis-ci.org/jaebradley/textstyler.svg?branch=master)](https://travis-ci.org/jaebradley/textstyler)
[![npm](https://img.shields.io/npm/v/textstyler.svg)](https://www.npmjs.com/package/textstyler)
[![npm_downloads](https://img.shields.io/npm/dt/textstyler.svg)](https://www.npmjs.com/package/textstyler)
[![GitHub release](https://img.shields.io/github/release/jaebradley/textstyler.svg)](https://github.com/jaebradley/textstyler/releases)

## Introduction
Apply text styling to substrings (represented by character index ranges)

I mostly built this library to handle text match results returned by [the GitHub Search API](https://developer.github.com/v3/search/)
```json
{
    "fragment": " without crashing', () => {\n  const div = document.createElement('div');\n  ReactDOM.render(<App />, div);\n});\n",
    "matches": [
        {
            "text": "React",
            "indices": [
                75,
                80
            ]
        }
    ]
}
```
so that I can format the matching fragment like
![alt-text](https://imgur.com/BASukro.png)

## Install
`npm install textstyler --save`

## API

### Text Style Options

Pretty much a 1-to-1 mapping with the [`colors` package](https://github.com/Marak/colors.js)

__TextColors__:
* BLACK
* RED
* GREEN
* YELLOW
* BLUE
* MAGENTA
* CYAN
* WHITE
* GRAY
* GREY

__BackgroundColors__:
* BLACK
* RED
* GREEN
* YELLOW
* BLUE
* MAGENTA
* CYAN
* WHITE

__TextFormat__:
* RESET
* BOLD
* DIM
* ITALIC
* UNDERLINE
* INVERSE
* HIDDEN
* STRIKETHROUGH

### Style

* `TextStyler.style(text, styledSubstrings)`
  * `text` is a string to apply formatting to
  * `styledSubstrings` are an array of `StyledRange` objects
    * A `StyledRange` takes
      * A `Range`
        * Takes a `start` and an `end` parameter
        * These are numbers that represent the __inclusive__ character indices to apply a particular `TextStyle` to
      * A `TextStyle`
        * Takes a `color`, `backgroundColor`, and `format` parameter
        * `color` represents the text color
        * `backgroundColor` represents the text background color
        * `format` represents some text format (like __bold__ text)
    * `StyledRange`s are applied in order - text styles are merged based on the last text style

#### Example
```javascript
import { Range, TextStyler, StyledRange, TextStyle, TextColor, TextFormat, BackgroundColor } from 'textstyler';

const value = 'foobar';
const range = new Range(1, 3);
const anotherRange = new Range(2, 4);

const style = new TextStyle(TextColor.CYAN, BackgroundColor.WHITE, TextFormat.ITALIC);
const anotherStyle = new TextStyle(TextColor.RED, BackgroundColor.BLUE, TextFormat.BOLD);

const styledRange = new StyledRange(range, style);
const anotherStyledRange = new StyledRange(anotherRange, anotherStyle);

const styledText = TextStyler.style(value, [ styledRange, anotherStyledRange ]);
```
The above example should output

![alt-ext](https://imgur.com/Bmf5vQq.png)

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