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

• Initial Setup
• Installation

Basic Usage

1import { style } from 'styled-string-builder';
2
3const styledText = style('Hello, World!').red.bold;
4console.log(styledText.toString());
5console.log(styledText.text);

Result:

• Hello, World!
• Hello, World!

Note: using .toString() or .text are equivalent.

Foreground Colors

1import { style } from 'styled-string-builder';
2
3console.log(style('Red text').red.toString());
4console.log(style('Green text').green.toString());
5console.log(style('Blue text').blue.toString());

Result:

• Red text
• Green text
• Blue text

Background Colors

1import { style } from 'styled-string-builder';
2console.log(style('Red background').bgRed.toString());
3console.log(style('Green background').bgGreen.toString());
4console.log(style('Blue background').bgBlue.toString());

Result:

• Red background
• Green background
• Blue background

Bright Colors

1import { style } from 'styled-string-builder';
2console.log(style('Bright red text').brightRed.toString());
3console.log(style('Bright green background').bgBrightGreen.toString());

Result:

• Bright red text
• Bright green background

Styles

1import { style } from 'styled-string-builder';
2console.log(style('Bold text').bold.toString());
3console.log(style('Italic text').italic.toString());
4console.log(style('Underlined text').underline.toString());
5console.log(style('Styled text').red.bold.underline.toString());

Result:

• Bold text
• Italic text
• Underlined text
• Styled text

256 Color

1import { style } from 'styled-string-builder';
2console.log(style('256 color text').color256(100).toString());
3console.log(style('256 color background').bgColor256(200).toString());

Result:

• 256 color text
• 256 color background

RGB Color

1import { style } from 'styled-string-builder';
2console.log(style('RGB text').rgb(255, 100, 0).toString());
3console.log(style('RGB background').bgRgb(0, 100, 255).toString());

Result:

• RGB text
• RGB background

Clear Styling

1import { style } from 'styled-string-builder';
2const styledText = style('Styled text').red.bold;
3console.log(styledText.clear().toString());

Result:

• Styled text

Raw ANSI

1import { style } from 'styled-string-builder';
2console.log(style('Custom ANSI').raw('\u001b[35m').toString());

Result:

• Custom ANSI

Combinations

1import { style } from 'styled-string-builder';
2// Combining multiple strings
3const combinedText = style('Hello').red.toString() + ' ' + style('World').blue.toString();
4console.log(combinedText);
5// Multiple chaining of properties and styles
6console.log(
7  style('Fancy Text')
8    .red
9    .bold
10    .underline
11    .bgYellow
12    .italic
13    .blink
14    .toString()
15);
16// Combining multiple styled strings with different properties
17const rainbowText =
18  style('R').red.bold.toString() +
19  style('a').yellow.italic.toString() +
20  style('i').green.underline.toString() +
21  style('n').cyan.inverse.toString() +
22  style('b').blue.dim.toString() +
23  style('o').magenta.strikethrough.toString() +
24  style('w').white.bgRed.toString();
25
26console.log(rainbowText);
27// Complex styling with 256 colors and RGB
28console.log(
29  style('Gradient')
30    .color256(196)
31    .bgColor256(233)
32    .bold
33    .toString() +
34  style(' Text')
35    .rgb(100, 150, 200)
36    .bgRgb(50, 75, 100)
37    .italic
38    .underline
39    .toString()
40);

Result:

• Hello World
• Fancy Text
• Rainbow
• Gradient Text

Examples of Color Functions

colorizeANSI

1import { colorizeANSI } from 'styled-string-builder';
2
3console.log(colorizeANSI('Red text', 31));
4console.log(colorizeANSI('Blue background', 44, true));

Result:

• Red text
• Blue background

colorize256

1import { colorize256 } from 'styled-string-builder';
2
3console.log(colorize256('Orange text', 208));
4console.log(colorize256('Teal background', 30, true));

Result:

• Orange text
• Teal background

colorizeRGB

1import { colorizeRGB } from 'styled-string-builder';
2
3console.log(colorizeRGB('Custom color text', 100, 150, 200));
4console.log(colorizeRGB('Custom background', 50, 75, 100, true));

Result:

• Custom color text
• Custom background

1import { applyStyle } from 'styled-string-builder';
2
3console.log(applyStyle('Bold text', 'bold'));
4console.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.