Styled String
This repository is meant the provide an easy (Builder like) way to style Strings in javascript.
Documentation available here
Description
The difference between styled string and other string styling libraries is the builder like approach,
minimizing boilerplate to the minimum.
How to Use
Basic Usage
import { style } from 'styled-string';
const styledText = style('Hello, World!').red.bold;
console.log(styledText.toString());
console.log(styledText.text);
Result:
- Hello, World!
- Hello, World!
Note: using .toString() or .text are equivalent.
Foreground Colors
import { style } from 'styled-string';
console.log(style('Red text').red.toString());
console.log(style('Green text').green.toString());
console.log(style('Blue text').blue.toString());
Result:
- Red text
- Green text
- Blue text
Background Colors
import { style } from 'styled-string';
console.log(style('Red background').bgRed.toString());
console.log(style('Green background').bgGreen.toString());
console.log(style('Blue background').bgBlue.toString());
Result:
- Red background
- Green background
- Blue background
Bright Colors
import { style } from 'styled-string';
console.log(style('Bright red text').brightRed.toString());
console.log(style('Bright green background').bgBrightGreen.toString());
Result:
- Bright red text
- Bright green background
Styles
import { style } from 'styled-string';
console.log(style('Bold text').bold.toString());
console.log(style('Italic text').italic.toString());
console.log(style('Underlined text').underline.toString());
console.log(style('Styled text').red.bold.underline.toString());
Result:
- Bold text
- Italic text
- Underlined text
- Styled text
256 Color
import { style } from 'styled-string';
console.log(style('256 color text').color256(100).toString());
console.log(style('256 color background').bgColor256(200).toString());
Result:
- 256 color text
- 256 color background
RGB Color
import { style } from 'styled-string';
console.log(style('RGB text').rgb(255, 100, 0).toString());
console.log(style('RGB background').bgRgb(0, 100, 255).toString());
Result:
Clear Styling
import { style } from 'styled-string';
const styledText = style('Styled text').red.bold;
console.log(styledText.clear().toString());
Result:
Raw ANSI
import { style } from 'styled-string';
console.log(style('Custom ANSI').raw('\u001b[35m').toString());
Result:
Combinations
import { style } from 'styled-string';
// Combining multiple strings
const combinedText = style('Hello').red.toString() + ' ' + style('World').blue.toString();
console.log(combinedText);
// Multiple chaining of properties and styles
console.log(
style('Fancy Text')
.red
.bold
.underline
.bgYellow
.italic
.blink
.toString()
);
// Combining multiple styled strings with different properties
const rainbowText =
style('R').red.bold.toString() +
style('a').yellow.italic.toString() +
style('i').green.underline.toString() +
style('n').cyan.inverse.toString() +
style('b').blue.dim.toString() +
style('o').magenta.strikethrough.toString() +
style('w').white.bgRed.toString();
console.log(rainbowText);
// Complex styling with 256 colors and RGB
console.log(
style('Gradient')
.color256(196)
.bgColor256(233)
.bold
.toString() +
style(' Text')
.rgb(100, 150, 200)
.bgRgb(50, 75, 100)
.italic
.underline
.toString()
);
Result:
- Hello World
- Fancy Text
- Rainbow
- Gradient Text
Examples of Color Functions
colorizeANSI
import { colorizeANSI } from 'styled-string';
console.log(colorizeANSI('Red text', 31));
console.log(colorizeANSI('Blue background', 44, true));
Result:
colorize256
import { colorize256 } from 'styled-string';
console.log(colorize256('Orange text', 208));
console.log(colorize256('Teal background', 30, true));
Result:
- Orange text
- Teal background
colorizeRGB
import { colorizeRGB } from 'styled-string';
console.log(colorizeRGB('Custom color text', 100, 150, 200));
console.log(colorizeRGB('Custom background', 50, 75, 100, true));
Result:
- Custom color text
- Custom background
import { applyStyle } from 'styled-string';
console.log(applyStyle('Bold text', 'bold'));
console.log(applyStyle('Underlined text', 'underline'));
Result:
- Bold text
- Underlined text
ANSI color codes
Social
Languages
Getting help
If you have bug reports, questions or suggestions please create a new issue.
Contributing
I am grateful for any contributions made to this project. Please read this to get started.
Supporting
The first and easiest way you can support it is by Contributing. Even just finding a typo in the documentation is important.
Financial support is always welcome and helps keep the both me and the project alive and healthy.
So if you can, if this project in any way. either by learning something or simply by helping you save precious time, please consider donating.
License
This project is released under the MIT License.
By developers, for developers.
