A Complete overview on Chalk JS Library

Sindre Sorhus April 30, 2022
a-complete-overview-on-chalk-js-library

The Chalk JS library is the third-party module used for formatting text, supplying a way to customize everything from color palettes to entire themes within a Node.js application.

Origin

colors.js used to be the most popular string styling module, but it has serious flaws like the extension of String.prototype that causes all sorts of problems, and the package is not maintained. There are other packages, but they either do too much or not enough. Chalk is a clean and focused alternative.

Advantages

  • If you customize the colour of your command line output, you can set it more easily.
  • It can help you make your work look nicer by giving you many colours to choose from, such as a red colour for warnings and other colours as well.
  • Chalk's straightforward and user-friendly API allows you to layer and chain different styles together to easily use and alter them.

Important Tip

Chalk 5 is an ES6 module. If you want to use Chalk with TypeScript or a build tool, we recommend using Chalk 4 for now.

Know More

Let’s get started.

How to install Chalk JS library

Open your terminal or command prompt and type the following command:

npm install chalk
Chalk JS Installation - Devstoc.

Folder Structure

Chalk JS Folder Structure - Devstoc.

A Simple Usage

import chalk from 'chalk';
console.log(chalk. bgCyan('Chalk Js Library - Devstoc.'));

Now we are going to learn more about Chalk JS Library

import chalk from "chalk";
const log = console.log;
// Combine styled and normal strings
log(chalk.blue("Chalk") + " JS" + chalk.green("Library"));
// Compose multiple styles using the chainable API
log(chalk.magenta.bgRed.bold("Chalk Js Library - Devstoc."));
// Pass in multiple arguments
log(chalk.yellow("Chalk", "JS", "Library", "-", "Devstoc.", "Laerer Labs"));
// Nest styles
log(chalk.blueBright("Chalk", chalk.underline.bgYellow("JS") + "!"));
// Nest styles of the same type even (color, underline, background)
log(chalk.red("I am a red line " + chalk.cyanBright.underline.bold("with a cyan substring") + " that becomes green again!"));
// ES2015 template literal
log(`
CPU: ${chalk.redBright("85%")}
RAM: ${chalk.whiteBright("25%")}
DISK: ${chalk.greenBright("67%")}
`);
// Use RGB colours in terminal emulators that support it.
log(chalk.rgb(0, 226, 242).underline("Underlined cyan color"));
log(chalk.hex("#2800D7").dim("Dimmed blue!"));

Output Command

Save your code and run index.js file using below command in your terminal or command prompt:

node index.js

Define your own themes

import chalk from 'chalk';
const error = chalk.bold.redBright;
const warning = chalk.rgb(255, 238, 0); // Yellow color
const success = chalk.green; // Green color
const info = chalk.hex('#00C3FF'); // blue color
console.log(error('Error!'));
console.log(warning('Warning!'));
console.log(success('Congratulations!'));
console.log(info('FYI!'));

String substitution

import chalk from 'chalk';
const name = 'Chalk Js Library - Devstoc.';
console.log(chalk.green('Learn more about %s'), name);
//OUTPUT:-
//=> Learn more about Chalk Js Library - Devstoc.

API Structure

chalk.

also view other related posts,