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

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.