Bootstrap a `react-blessed` Terminal Application

Add ESLint Rules to a `react-blessed` Application

Change text font with `figlet` inside a `react-blessed` Application

Extract a `react-blessed` Component and Add the `useInterval` Hook

Fetch the current weather with `weather-js` and display in `react-blessed`

Extract a custom useRequest hook to simplify fetching data in a react-blessed Application

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

Position and Align Text inside a `react-blessed` <box> Element

Create a Full-Screen Dashboard in `react-blessed` using a Percentage Based Layout

Use the react-blessed-contrib Grid Component to Make a Dashboard Layout

Build a Terminal Dashboard with React

The text in our terminal node app is a bit boring at the moment. This lessons introduces the [`chalk`](https://npm.im/chalk) and [`gradient-string`](https://npm.im/gradient-string) modules to bring a bit of color to the application. You could manually use [ANSI escape codes](https://en.wikipedia.org/wiki/ANSI_escape_code) to style text, but using a helper library like `chalk` or `gradient-string` makes the task much simpler. 

Elijah Manor: [0:00] Here, we have the beginnings of our 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. Let's do something about that.

[0:18] We'll use a library called chalk to bring a bit of color to our application. You can actually add colors using ANSI escape codes, but the chalk library provides a much better API.

[0:30] Let's install chalk with npm install chalk. Then, we'll come back over to our today component, and import chalk from chalk. We'll scroll down to our box component where we're displaying the date, and we'll wrap the date with chalk.blue.

[0:51] Now, if we run our app again, our date will show up blue. Next, let's add a bit of color to our weather.

[1:00] In our weather format function, we'll wrap the temperature in chalk.yellow. Then, we'll come and wrap the conditions in chalk.green, wrapping the lower temperature and chalk.blue, and the high temperature in chalk.red.

[1:21] Now, if we run our app again, our weather information looks much nicer. For our time, however, let's do something a bit more fun.

[1:32] We'll use a library called gradient-string. That will enable us to have some interesting color effects. We'll install the library with npm install gradient-string, and then come back to our today component and import gradient from gradient-string.

[1:55] Now, we'll come down to our time, and we'll wrap it with gradient.rainbow. When we run our app again, we'll get something interesting but not quite what we're looking for. Well, it turns out, there's another method that we should use if we're dealing with multiple lines of content. We'll chain off the multiline method. Now, when we run the app, the result is much nicer.

[2:26] Back in our code, we could adjust the type of gradient to use. For example, we could use the atlas gradient. Then, we'll try that out in the app to get a much more subtle gradient. Adding a bit of color and gradients to terminal app is a small thing, but it brings a nice variety to the application.

Course

Build a Terminal Dashboard with React

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

Share this video with your friends