Introduction to Layout Wrapper Primitives

[00:00 - 00:09] Hey everybody, Travis here with another lesson in composing layouts in React. In this module we are going to talk about the wrappers.

[00:10 - 00:23] Now 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.

[00:24 - 00:33] 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 the layouts we desire.

[00:34 - 00:45] Now we've already shown that it's common to pair our primitives with other prim itives. Many times we can compose them in as children like in the second version of our menu component in lesson 6 of the previous module.

[00:46 - 01:00] In that component we use the inline cluster primitive inside 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.

[01:01 - 01:12] This is especially true when working with wrapper primitives. To achieve this pairing in such cases I would like to recommend using the as prop pattern also known as polymorphic react.

[01:13 - 01:26] The as prop pattern lets us write code like this. The above code uses a center primitive, which we will learn about in this module, but it also has the same capabilities as a stack.

[01:27 - 01:39] In many cases you can also flip that around and have a stack as a center. If you're not familiar with the as prop pattern it's very simple to implement.

[01:40 - 01:58] In the above code we're deconstructuring, sorry, the as prop from the rest of the props, releasing it to capital as and giving it a default value of div. We are then using the as as our component.

[01:59 - 02:09] This allows us to not just accept any element name, but any component that we want to pass in like this. We're going to have a button or we can have it be a pad box.

[02:10 - 02:21] This pattern allows us to inject a component that is already good at something into another component that is good at something else. We're going to have one component that is good at both of them.

[02:22 - 02:32] Luckily for us, if you are using style components, you don't need to implement this pattern yourself. Style components has already implemented it for us.

[02:33 - 02:39] In the next few lessons we are going to be using this pattern as we learn how to build the wrapper layout primitives. (inhales deeply)