createContentSlot

Create a component which tracks whether any content is placed inside of it. The component exposes a ref isEmpty which indicates whether the slot is empty, as well as convenience accessors isEmpty and hasContent. Additionally, it provides two sub-components, WhenEmpty and WhenHasContent, which render their contents conditionally based on whether the slot is empty.

import { createContentSlot } from "@alloy-js/core";

function createContentSlot(): ContentSlot;

Parameters

Returns

ContentSlot

Example

const ContentSlot = createContentSlot();

<>
  <ContentSlot.WhenEmpty>The slot is empty!</ContentSlot.WhenEmpty>
  <ContentSlot.WhenHasContent>The slot has content!</ContentSlot.WhenHasContent>
  <ContentSlot>
    {someCondition && "Here is some content!"}
  </ContentSlot>
</>