SlotContent

Learn how to type slot content in your React application.

This type resolves the content type for a versioned Slot ID.

Signature

This type has the following signature:

type SlotContent<I extends VersionedSlotId>

Usage

Pass a versioned slot ID like 'home-hero@1' to get the corresponding content type:

import type {SlotContent} from '@croct/plug-react';
type HeroContent = SlotContent<'home-hero@1'>;
export function HomeHero(props: HeroContent) {  return <h1>{props.title}</h1>;}

When using CLI-generated types, the type parameter is constrained to known slot IDs, providing autocompletion and type safety.

Type narrowing

When a slot's content is a union of multiple components, SlotContent resolves to a discriminated union. Each variant includes a _type property set to the component ID, which you can use to narrow the type:

import type {SlotContent} from '@croct/plug-react';
type HeroContent = SlotContent<'home-hero@1'>;// Resolves to:// | {_type: 'text-hero', title: string, subtitle: string}// | {_type: 'image-hero', title: string, image: string}
export function HomeHero(props: HeroContent) {  switch (props._type) {    case 'text-hero':      // props is narrowed to the text-hero component type      return <h1>{props.subtitle}</h1>;    case 'image-hero':      // props is narrowed to the image-hero component type      return <img src={props.image} alt={props.title} />;  }}

If the slot maps to a single component, the resolved type is a plain object without the _type property.