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:

export default function MenuBar() {

  return (

    <MenuContainer>

      <Inline stretch={1} align="center" switchAt="40rem">

        <div>

          <Logo />

        </div>

        <InlineCluster gutter="md" justify="center" align="center">

          <span>Product</span>

          <span>Features</span>

          <span>Marketplace</span>

          <span>Company</span>

        </InlineCluster>

        <Inline gutter="md" align="center" justify="end">

          <span>Sign in</span>

          <Button>Sign up</Button>

        </Inline>

      </Inline>

    </MenuContainer>

  );

}

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:

<Center as={Stack}>{/*...*/}</Center>;