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

Elijah Manor: [0:00] Here, we have the beginnings of a React terminal dashboard. At this point, we have sections laid out in the terminal for Today, Recent Commits, Time Log, Pomodoro, and GitHub. These are currently laid out manually with percent.

[0:14] To fully take up space, we need to divide by 100%. For example, horizontally, since Today has a width of 50%, the Recent Commits needs to be 50%. Likewise, the bottom three components need to add up to 100% as well -- 25, 25, and 50.

[0:32] Let's come over to the dashboard component to show you what the code looks like for this approach. In our App's return, we define Today's top, left, width, and height props based on percent, as well as all the other components.

[0:47] However, in this lesson, we'll look at another way we can lay out our components. We're going to reach for another repo in this case, react-blessed-contrib, which is a set of React components that can be rendered with react-blessed, which is a wrapper around the underlying blessed-contrib codebase.

[1:06] That repo has a lot of helper widgets such as line chart, pie chart, map, gauge, donut, sparkline, etc., but the thing that we'll be using for now is the Grid component. Once you define a grid and define its overall rows and columns, you could tell each subcomponent where it should display inside that Grid via row, col, rowSpan, and colSpan.

[1:32] Under the covers, it will convert that to top, left, width, and height automatically. However, we won't be using this syntax, since we're using the react-blessed config wrapper.

[1:44] First, let's install the dependency with npm install react-blessed-contrib. Then, we'll come over to our dashboard component and import { Grid } from 'react-blessed-contrib' and then replace Fragment with Grid and the closing tag.

[2:05] Now, we'll define the rows prop of {12} and the number of columns as {12} as well. This defines how many rectangles will be in our Grid, in this case 12 by 12. We could change our top, left, width, and height props to row, col, rowSpan and colSpan.

[2:27] For today, our top will now be row and our left will be col. In height, we'll make rowSpan to be {4}, which is technically 33%, not exactly 35% like we had, but I'm OK with that. Width will be colSpan of {6}, which is half of our {12} Grid.

[2:49] For our Time Log, top will go to row of {4}, left to col and will stay at {}, height to rowSpan of {8}, and width to colSpan of {3}. For Pomodoro, top will go to row of {4}, left to col of {3}, height to rowSpan of {8}, and width to colSpan of {3}.

[3:23] As for our Recent Commits component, we'll replace top to be row and set it to {4} but change left to be col instead of {6}. Switch height to rowSpan of {6} and width to colSpan of {6}. Finally, for GitHub, top will go to row of {6}, left to col of {6}, height to rowSpan of {6}, and width to colSpan of {6}.

[3:54] Now, we could come up and remove Fragment since we no longer need it, since we're using Grid as our container element and we can run our app with npm start, but things don't line up just right.

[4:08] It looks like our Recent Commits component isn't configured correctly. Its top is 33% and it should be , so we can come back over to the Recent Commits component and adjust its row to not be {4}, which is 33% of {12} but to be {} instead. Now, when we come over to run our app, it'll layout just right.