What macro-components does

This library solves a problem React developers run into when building composite UI components—those bigger building blocks made up of several smaller pieces, like a card with an image, heading, and description. Normally, you'd have to define a bunch of custom props to control what goes where. This library lets you define the layout structure once, then just pass child components into it without needing any custom props at all.

How it works

The core idea is simple: you define a function that describes the layout you want, specifying where different child elements should go. Then you wrap that function with macro() to turn it into a regular React component. When someone uses your component, they just pass their content as children—and the library automatically figures out which child goes where based on the component's type or name. For example, if you create a Banner component that expects a Heading and a Subhead, you just write ...... and everything slots into place.

You can also pass regular props to customize things like colors or spacing, and you can use the included Clone utility to set default styling on child elements. If a child is optional and not provided, that section of the layout simply won't render.

Who would use this

This is most useful for developers building component libraries or design systems—think reusable UI patterns like alert boxes, media objects (image plus text side-by-side), cards, or panels. It works especially well with styling libraries like styled-components. Instead of spending time designing elaborate prop APIs for every layout variant, you define the structure once and let composition handle the flexibility. This keeps your component code simpler to maintain and easier for other developers on your team to understand and use.