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

In order to make text a bit more interesting in a `react-blessed` terminal app, we'll use the `figlet` node module to spice up our text with a bit of fancy ASCII Art. We'll define an array of various fonts and iterate through them every second as we experiment with this feature.

Elijah Manor: [0:00] Here, we have code for our React terminal app. We could come to the terminal and run npm start to kick it up and see the date, time, and a counter updating. However, let's spice up things a little bit and change the font of the time with some fancy ASCII art.

[0:19] To do this, we'll be using the figlet Node module, which will let us pick between different fonts and has a lot of built-in options for us to use.

[0:28] Let's go to our terminal and npm install figlet. Then, we'll come back into our app, and at the top of the file, we'll import figlet from "figlet."

[0:39] Then to have some fun, we'll define a fonts array, including 12 fonts that we'll iterate over -- Straight, ANSI Shadow, Shimrod, doom, Big, Ogre, Small, Standard, Bigfig, Mini, Small Script, and Small Shadow. Now that we have our fonts array, let's go and use it.

[1:14] First, let's split apart our time from our date so that we can render them separately. We'll copy our dateTime definition and paste it below. We'll make the first one our date and remove the time options, and we'll make the second one our time and remove the date options.

[1:34] Now, we'll update the return statement of our component. For now, just return the date field and the time field separately. We won't show the count variable visually, but we'll use that to determine our font choice.

[1:48] Let's come back up to our time declaration and wrap it with figlet.textSync. We'll give it a second parameter of object that defines the font choice. In our case, we'll take our fonts array, grab our current count, and mod that with the length of the FONTS array.

[2:07] Now, if we come to our terminal and run our app, we'll see the date and time rendered separately, and each time the count is updated, a new font is used.

[2:17] One last bit of cleanup. Our count variable is a fun index, so let's change that. We'll call it fontIndex and change our setter to setFontIndex. Then, we'll update the references in our React.useEffect, and finally, where we pick the font for our time.

[2:43] Now, we should be able to run our app again, and it'll execute just like it did before.

Course

Build a Terminal Dashboard with React

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

Share this video with your friends