Knowledge Base/How to render layout of the potential component when a slot is empty?

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 UniformComposition identifies 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.

Last modified: March 18, 2025