How to render layout of the potential component when a slot is empty?
how-toDeveloperPreviewCanvasNextJS app routerSDKNextJS
What is resolveEmptyPlaceholder?
resolveEmptyPlaceholder is a callback function that allows you to dynamically determine what component should be rendered in empty slots within a UniformComposition.
How Does resolveEmptyPlaceholder Work?
- Invocation: The function is called whenever
UniformCompositionidentifies an empty slot. - Parameters: It receives an object containing:
parentComponent: The component containing the slot.component: The current component instance.slotName: The name of the slot.slotIndex: The index of the slot.
Customization Logic
You can customize placeholders based on different criteria within this function. Here’s an example of how you might utilize it:
const MyComposition = () => {
return (
<UniformComposition
// ... other props
resolveComponent={({ component }) => {
// Your regular component resolution logic
}}
resolveEmptyPlaceholder={({ parentComponent, component, slotName, slotIndex }) => {
// Customize based on parent component type
if (parentComponent?.type === 'hero') {
return { component: EmptyHeroSlotPlaceholder };
}
// Customize based on slot name
if (slotName === 'content') {
return { component: EmptyContentPlaceholder };
}
// Default empty placeholder
return { component: DefaultEmptyPlaceholder };
}}
/>
);
};
// Example placeholder component
const EmptyContentPlaceholder = (props) => (
<div className="empty-content-placeholder">
<p>Add content components here</p>
<button>Add component</button>
</div>
);
Rendering Behavior
- The selected placeholder component is rendered in the slot with
opacity: 0, maintaining the layout size without displaying visible content. - This approach gives a visual indication of where additional components can be added.
By leveraging resolveEmptyPlaceholder, you gain fine-tuned control over how your application handles empty slots, ensuring a more customizable and adaptable user interface.
Published: March 18, 2025