When using Carbon Component for Svelte, is it possible to assign a component as a variable, and then pass that variable to a prop?
For example, I'm using the <Modal />
component, whose primary button exposes a primaryButtonIcon
prop; I want to assign different icons depending on the state.
Something like this:
let uploadStatus: "active" | "inactive" | "finished" | "error" | undefined = "active";
let primaryButtonIcon: WHAT? = <InlineLoading status={uploadStatus} />;
<Modal primaryButtonIcon={primaryButtonIcon} />
But what should I declare the primaryButtonIcon
as?
UPDATE:
When I use ...
let uploadStatus: "active" | "inactive" | "finished" | "error" | undefined = "active";
let primaryButtonIcon: typeof SvelteComponent<any> = <InlineLoading status={uploadStatus} />;
... there are errors ...
The error relating to uploadStatus
is ...
Cannot redeclare block-scoped variable 'uploadStatus'. ts(2451)
The error relating to primaryButtonIcon
is ...
Property 'prototype' is missing in type 'SvelteComponentTyped<InlineLoadingProps, { click: MouseEvent; mouseover: MouseEvent; mouseenter: MouseEvent; mouseleave: MouseEvent; success: CustomEvent<...>; }, {}>' but required in type 'typeof SvelteComponent'. ts(2741)
And the error relating to <InlineLoading />
is ...
Conversion of type 'string' to type 'InlineLoading' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first. ts(2352)
Have I declared something wrongly?
The type is shown right in the docs in the "Type" column, it's the base component type from svelte
, so:
import { type SvelteComponent } from 'svelte';
let primaryButtonIcon: typeof SvelteComponent<any> = ...
(Though one should generally use ComponentType
instead.)
But, you cannot define markup inline in Svelte. It has to be extracted to a self-contained component file.
(In Svelte 5 snippets allow referencing pieces of markup in the script.)