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?


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

查看所有标签

猜你喜欢:

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

零边际成本社会

零边际成本社会

[美]杰里米·里夫金 / 赛迪研究院专家组 / 中信出版社 / 2014-11-1 / 49.00

在这本书中,《第三次工业革命》作者杰里米•里夫金开创性地探讨了极致生产力、协同共享、产消者、生物圈生活方式等全新的概念,详细地描述了数以百万计的人生产和生活模式的转变。他认为,“产消者”正在以近乎零成本的方式制作并分享自己的信息、娱乐、绿色能源和3D打印产品。他们也通过社交媒体、租赁商、合作组织以极低或零成本的模式分享汽车、住房、服装和其他物品;学生更多地参与到基于零成本模式的开放式网络课程…… ......一起来看看 《零边际成本社会》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

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

RGB CMYK 互转工具