bindSlots

Bind a section's schema to the values its renderer received.

Bind a section’s schema to the values its renderer received.

import { bindSlots, defineSchema, Section, Slot, text } from "@homepages/template-kit";
import type { SectionProps } from "@homepages/template-kit";

const schema = defineSchema({
  label: "Contact",
  anchor: "contact",
  slots: { phone: text.short({ label: "Phone" }) },
});
type Props = SectionProps<typeof schema>;

export default function Contact({ slots }: Props) {
  const slot = bindSlots(schema, slots);
  return (
    <Section>
      <Slot.Text slot={slot.phone} as="span" />
    </Section>
  );
}

The returned map is keyed and typed off typeof schema, so a mistyped slot id is a compile error rather than an undefined that renders nothing. Call it per render: bindings are fresh objects with no memoised identity, which is harmless because they are only read, never used as a React key or dependency.

Import from @homepages/template-kit.

Signature

function bindSlots<S extends SectionSchemaShape>(schema: S, slots: { [K in keyof S["slots"]]: SlotValue<S["slots"][K]>; }): SlotBindingMap<S>

Parameters

Name	Type	Required	Description
`schema`	`S`	required
`slots`	`{ [K in keyof S["slots"]]: SlotValue<S["slots"][K]> }`	required

Returns

SlotBindingMap<S>

See also