SlotContent

Learn how to type slot content in your Hydrogen storefront.

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-hydrogen';
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-hydrogen';
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.