<Slot>

​

Props

1. ​

   snapshot

   MakeswiftComponentSnapshot

   required

   The Makeswift snapshot to render.

2. ​

   label

   string

   required

   The label of the element in the Visual Builder.

3. ​

   fallback

   React.ReactNode

   The content to be rendered until the user opts in to making visual edits to the editable slot.

   If fallback is not provided, it will be set to null by default. In this case, the user will not be able to see the element in the Canvas, but they will be able to select it from the Elements Panel.

   One good use case for this default is with Dynamic Routes; for example, product detail pages. If the route renders many pages, it might be unreasonable to expect the user to visually edit each one before publishing. Because the null default will not show any content until the user opts in, the user could publish the site without affecting any visual content. They could then update and publish individual pages as they are ready.

​

Usage in the Visual Builder

The <Slot> component will render its fallback by default until the user opts in to visual editing. Visually, this component provides a checkbox property that allows the user to toggle between displaying the fallback and the editable slot itself, including any user generated content within it.

​

Example

​

Basic Example

The following example creates a home page with a header, a footer, and a main content section that can be edited in the Makeswift Visual Builder using the <Slot> component.

import { Slot } from "@makeswift/runtime/next";
import { getSiteVersion } from "@makeswift/runtime/next/server";
import { client } from "@/makeswift/client";

export default async function Page() {
  const mainContentSnapshot = await client.getComponentSnapshot(
    `main-content`, //unique identifier of the component rendered on the page
    { siteVersion: await getSiteVersion() }
  );

  return (
    <>
      <header />
      <Slot snapshot={mainContentSnapshot} label={`Main Content`} />
      <footer />
    </>
  );
}