Tips and tricks on using Uniform slot in code

How to identify if a slot has no items in it #

It might be useful when you want to show different content based on components being added to the slot or not. The code below takes into account that Uniform Canvas editor mode adds an empty placeholder component when no components are in the slot:

const isSlotEmpty = (components: Pick<ComponentInstance, '_id'>[] | undefined) => { if (components && components.length > 0) { const [firstComponent] = components; return isComponentPlaceholderId(firstComponent._id); } // Handle the case where the array is undefined or empty return true; };

For page router, you could pass the actual slot, for the app router, you’d access the component?.slots

How do make slot render the child components in a different way#

You can define wrapper for your slot, i.e. how you want it to render.
Page router has the wrapperComponet attribute. App router just accept the same as a child component.

How to customize empty placeholder for a slot#

Uniform Canvas editor mode adds an empty placeholder component when no components are in the slot. Check this documentation on how to customize it: