or run

npx @tessl/cli init
Log in

Version

Files

tile.json

task.mdevals/scenario-3/

Host Custom Props Consumer

Create a small React helper and banner component that read custom properties provided by a host shell at runtime. The goal is to prove you can consume host-provided context data from the dependency and surface it inside your child application UI.

Capabilities

Extracts host custom props

  • The hook returns host-provided values for displayName, organization, and theme, merging any caller-provided defaults when the host omits fields. @test

Renders banner with fallbacks

  • The banner renders a greeting using the host displayName and organization, falling back to caller-specified defaults (or "Guest" / "Unknown") when missing. @test

Reacts to host updates

  • When the host custom props change in the provided runtime context, the banner updates its rendered text without remounting. @test

Implementation

@generates

API

export interface HostCustomProps {
  displayName?: string;
  organization?: string;
  theme?: "light" | "dark";
}

export function useHostCustomProps(
  defaults?: Partial<HostCustomProps>
): HostCustomProps;

export interface HostBannerProps {
  fallbackName?: string;
  fallbackOrg?: string;
}

export function HostBanner(props?: HostBannerProps): JSX.Element;

Dependencies { .dependencies }

@ice/plugin-icestark { .dependency }

Provides runtime context for host-supplied custom properties that should flow into the child React tree.