Position and Align Text inside a `react-blessed` <box> Element
In this lesson we focus on ways to position text inside a react-blessed <box> element. Instead of using a multiline template literal, we use <text> elements and provide props of top, right, and left to align content within its container.
Elijah Manor: [0:01] Here, we have the beginnings of a React terminal dashboard. If we come to the terminal and kick off our app with npm start, you'll see a slightly colored version, displaying the date, current time, and weather information. However, at this point, everything is left aligned.
[0:16] Let's talk about positioning elements within the box. We'll come back to our today component and scroll down to the return statement. Currently, we've been handling position with at multiline string template literal, but that's pretty limiting.
[0:33] First, let's take each piece of information, and put them into text elements -- our date, our time, and our weather. If we run our app now, we'll see that all the content is overlapped on top of each other, which isn't what we want.
[0:57] However, if we come back to our code, we could adjust where the text gets displayed by adding a top prop. For now, we'll leave the date as is, but for the time we'll add a top of center, and for weather we'll add a top of 100%.
[1:13] Now if we run our app again, we'll see that things look a bit better but not quite what we want. The weather information is outside the boxed area. We technically don't want the top of the text to be the very bottom of the box.
[1:26] Thankfully, we could back up the position by adding a -3 after the 100%. Now, if we run the app, our weather information will be inside the box. Yay.
[1:40] Let's now focus on getting our date to be right aligned in the box. To do that, we could add a prop of right and set it to the number zero. It's important that you use a number here and not the string zero. In addition, let's do a little format of the time as well. We'll want to center the text horizontally in the box. To do this, we'll add the left prop of center.
[2:05] Now when we run our app, you'll see that our date is indeed aligned to the right, and our time is not only centered vertically but also horizontally. However, the date and weather are hugging the edge of the box a bit too close for my liking.
[2:20] Let's come back to our code and do a little adjustment. For our date, we'll modify the right to be one, instead of zero. For the weather, we'll add a left prop of one, which will push it over just a little bit. Now when we run our app, our elements all look nicely aligned.