-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(readme): add more context to README
- Loading branch information
1 parent
88e242d
commit 06723c6
Showing
1 changed file
with
100 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,100 @@ | ||
# textstyle | ||
# 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 | ||
] | ||
} | ||
] | ||
} | ||
``` | ||
|
||
## 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) |