Change text color with `chalk` and `gradient-string` inside `react-blessed`

栏目: IT技术 · 发布时间: 4年前

内容简介:Change text color with `chalk` and `gradient-string` inside `react-blessed`The above video is hosted onThis is the7thpost in a series where we will be creating a developer dashboard in the terminal using

Change text color with `chalk` and `gradient-string` inside `react-blessed`

The above video is hosted on egghead.io .

This is the7thpost in a series where we will be creating a developer dashboard in the terminal using react-blessed and react-blessed-contrib . For more information about the series and to take a sneak peak at what we're building, go to the 1st post in the series for more context.

  1. Bootstrap react-blessed Application
  2. Add ESLint Rules to react-blessed App
  3. Change text font with figlet
  4. Extract Component and Add useInterval hook
  5. Fetch and display current weather with weather-js
  6. Extract custom hook to simplify data fetching
  7. Change text color with chalk and gradient-string

... ~20 more lessons to come ...

NOTE: You can find the code for this project in GitHub and you watch the whole Build a Terminal Dashboard with React video series on egghead.io .

Current Application

Here we have the beginnings of a React Terminal Dashboard. If we run our application with npm start you'll see a box displaying the date, time, and the current weather. However, at this point things are pretty boring (other than the fancy ASCII art). So, let's do something about that.

Change text color with `chalk` and `gradient-string` inside `react-blessed`

Chalk

To add color to our terminal application we'll use a node library called chalk .

Change text color with `chalk` and `gradient-string` inside `react-blessed`

You can manually add colors using ANSI escape codes , but the chalk library provides a much nicer API

// Manually using ANSCI escape codes
console.log('\x1b[31mHello World\x1b[0m');

// OR use the chalk API
console.log(chalk.red('Hello World'));

Install

To start using the chalk module, we'll install it from the terminal using the following command.

npm install chalk

Update Date and Weather

We'll focus first on updating the date and weather information inside our Today component. To begin import the module at the top of the file with import chalk from "chalk" . Then, inside the <box> element, where we are displaying the date, we'll wrap date with chalk.blue . To update the weather, we'll update the formatWeather function and wrap the temperature , conditions , low , and high variables also with chalk methods.

/* … */
import chalk from 'chalk';
const formatWeather = ([results]) => {
  const { location, current, forecast } = results;
  const degreeType = location.degreetype;
  const temperature = `${current.temperature}°${degreeType}`;
  const conditions = current.skytext;
  const low = `${forecast[1].low}°${degreeType}`;
  const high = `${forecast[1].high}°${degreeType}`;

  return `${chalk.yellow(temperature)} and ${chalk.green(    conditions,  )} (${chalk.blue(low)} → ${chalk.red(high)})`;};

export default function Today() {
  /* … */
  return (
    <box { /* … */ }>
      {`${chalk.blue(date)}`}
${/* … */}

${
  weather.status === 'loading'
    ? 'Loading...'
    : weather.error
    ? `Error: ${weather.error}`
    : formatWeather(weather.data)
}`}
    </box>
  );
}

The results so far of our colorization process is the following.

Change text color with `chalk` and `gradient-string` inside `react-blessed`

Gradient String

For our time, however, let's do something a bit more fun.

Change text color with `chalk` and `gradient-string` inside `react-blessed`

We'll use a library called gradient-string that will enable us to have some interesting color effects.

Install

To start using the gradient-string module, we'll install it from the terminal using the following command.

npm install gradient-string

Update Time

Now, we can come back to our Today component and import gradient from gradient-string at the top of the file. Then inside our return statement we'll wrap our time variable with gradient.rainbow.multiline (since we are dealing with multi-line content).

NOTE: If you don't use the mult-line method the outcome won't be the desired results. If your content is not multi-line, then using the method is not necessary.
/* … */
import gradient from 'gradient-string'
export default function Today() {
  /* … */
  return (
    <box { /* … */ }>
      {`${ /* … */ }
${gradient.rainbow.multiline(time)}
${ /* … */ }`}
    </box>
  )
}

Now when we run our app the results have a neat rainbow gradient!

Change text color with `chalk` and `gradient-string` inside `react-blessed`

The library has lot of other built-in gradients that you can use or you can create your own ! I've tried a few and I tend to like the atlas gradient, which is shown below.

Change text color with `chalk` and `gradient-string` inside `react-blessed`

Conclusion

Adding a bit of color and gradients to a terminal app is a small thing, but it brings a nice variety to the app. The next lesson will focus on how to position elements within the <box> (top, right, bottom, center).

Comic: Why Do Their Keyboards Keep Breaking?


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Ethnography and Virtual Worlds

Ethnography and Virtual Worlds

Tom Boellstorff、Bonnie Nardi、Celia Pearce、T. L. Taylor / Princeton University Press / 2012-9-16 / GBP 21.00

"Ethnography and Virtual Worlds" is the only book of its kind - a concise, comprehensive, and practical guide for students, teachers, designers, and scholars interested in using ethnographic methods t......一起来看看 《Ethnography and Virtual Worlds》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具