Slots are a powerful concept in Subframe for reusing React components and avoiding prop drilling. Slots let you pass in elements or other components as a property to a component. It’s perfect for those following the React composition pattern (recommended).
You should use a slot when your component has:
dynamic content, e.g. a social media card whose contents may be text, images, or a video
interactive elements like buttons
How slots export to code
If you're familiar with React children props, slots are nearly identical to that in concept.
Here's an example of a Card component with two slots, buttons and children:
<Card
title="Product name"
callToAction={
<Button variant="brand-primary" onClick={...}>Add to cart</Button>
}
>
<ProductImage />
</Card>
Note that in this example:
The
childrenslot is used to display aProductImage, but can also display any other elements like a video or text. This slot lets theCardcomponent handle a variety of content.The
callToActionslot is used to add aButtoninstance with thebrand-primaryvariant and anonClickhandler. This slot lets you customize and add event handlers to a button within the Card component without prop drilling.
How to create a slot
Only stacks can be slots. To create a slot, you’ll first need to create a stack. You can do so easily by grouping an element.
Once you have a stack to add your new slot:
Select the stack
Click on the + labeled with “Slot” on the right-hand side
You can also right-click any stack and click “Add Slot”.
How to use a slot
Select the component with a slot
Click on “Edit slot contents”
You can also edit any slots contents by double-clicking the slot contents.