This video is available to students only

Introduction to Layout Wrapper Primitives

Introduction to layout wrapper primitives

In the previous module, we focused on primitives that create space between elements. These primitives probably do most of the heavy lifting, but they don't cover all the basic layout scenarios. In this module we are going to learn how to create what I like to call the "wrapper" primitives. These primitives wrap other components to produce basic layouts.

The as prop pattern#

We have already shown that it is common to pair our primitives with other primitives. Many times we can compose them in as children, like the second version of our Menu component in lesson 6 of the previous module. In that component we used the InlineCluster primitive inside of the Inline primitive to create the desired look:

However, sometimes the primitives need to be at the same level and can't be nested to create the desired layout. This is especially true when working with the wrapper primitives. To achieve this pairing in such cases, I would highly recommend the as prop pattern, (also known as polymorphic React). The as prop pattern lets us write code like this:

 

This page is a preview of Composing Layouts in React

Start a new discussion. All notification go to the author.