Understanding Placeholder Content in Preview Mode

When working with Uniform, you may notice placeholder content appearing in empty slots during preview mode. This is expected behavior, as Uniform always renders a placeholder if there are no components in a slot. However, this only occurs in preview and not in the final rendered output.

Best Practices for Rendering Slots

To ensure proper rendering and management of your components, we recommend the following best practices:

1. Use UniformSlot Component

Always use the UniformSlot component unless there's a specific reason not to. Using UniformSlot offers several advantages:

• Simplifies component structure, making debugging easier

• Allows components to be reused across different areas of the site

• Facilitates easier updates and modifications in the future

2. Configure Component Logic in Uniform

Instead of handling complex logic within your components, consider configuring it directly in Uniform. For example:

• Use component-level visibility rules based on expected values

• Set up conditional rendering for static and dynamic content

3. Handling Empty Slots

To manage empty slots effectively, you can:

1. Use the emptyPlaceholder attribute on UniformSlot:

   <UniformSlot name="mySlot" emptyPlaceholder={<p>No content available</p>} />

2. Implement a custom function to check if a slot is empty:

   
   const isSlotEmpty = (components) => {
     if (components && components.length > 0) {
       const [firstComponent] = components;
       return isComponentPlaceholderId(firstComponent._id);
     }
     return true;
   };
       

3. Use conditional rendering based on the isEmpty check:

   
   {!isSlotEmpty(component?.slots?.image) ? (
     <UniformSlot name="image" />
   ) : (
     <h3>No items in image slot</h3>
   )}
       

Configuring Visibility Rules

To further control when components are displayed, you can set up visibility rules in Uniform:

1. Navigate to the component configuration in Uniform

2. Locate the "Edit visibility rules" section

3. Set conditions for when the component should be shown

4. Add additional conditions as needed

By following these practices, you can effectively manage empty slots, control placeholder content, and create more flexible and maintainable components in your Uniform projects.