Type Alias VariantFc<Props, Defs>

VariantFc: {
    variantNames: Exclude<keyof Defs, "default">[];
    (
        props: Defs extends { default: Partial<Props> }
            ? Omit<Props, keyof Defs<Defs>["default"]>
            : Props,
    ): ReactNode;
} & Types.Simplify<Omit<VariantMap<Props, Defs>, "default">>

A component loaded with all its variants. The variant named default is treated as if it describes changes to the base component.

Type Parameters

Props extends object
Props type for base component.
Defs extends VariantDefs<readonly string[], Props>
Type of variant definitions.

Example

// No prop changes on base component, two variants fix “color” prop:
VariantFc<
  {color: string; text: string},
  {
    Primary: {color: string}
    Secondary: {color: string}
  }
> = {
  (props: {color: string; text: string}) => Node
  primary: FC<{text: string}>
  secondary: FC<{text: string}>
  variantNames: ("Primary" | "Secondary")[]
}

// When fixing the “text” prop on the “default” variant, target
// component no longer takes this prop:
VariantFc<
  {color: string; text: string}
  {
     Primary: {color: string}
     Secondary: {color: string}
     default: {text: string}
  }
> = {
  (props: {color: string}) => Node // No “text” prop.
  // Note no “default” prop on target component as it is the default.
  primary: FC<{text: string}>
  secondary: FC<{text: string}>
  variantNames: ("Primary" | "Secondary")[]
}

Type Alias VariantFc<Props, Defs>

Type Parameters

Example

Settings