TypeScript

When using Typescript with React, you can add the following to your react.d.ts file to get type hints for the StrutFit web components.

declare module 'react' {
  namespace JSX {
    interface IntrinsicElements {
      'strutfit-size-button': {
        id?: string;
        'product-code'?: string;
        'product-name'?: string;
        'product-image-url'?: string;
        'default-size-unit'?: string;
        'default-apparel-size-unit'?: string;
        'is-kids'?: string;
        variant?: string;
        disabled?: string;
        'full-width'?: string;
        'background-color'?: string;
        border?: string;
        'border-color'?: string;
        'font-size'?: string;
        'font-family'?: string;
        color?: string;
        'icon-color'?: string;
        'show-icon'?: string;
        'font-weight'?: number;
        margin?: string;
        'margin-top'?: string;
        'margin-left'?: string;
        'margin-bottom'?: string;
        'margin-right'?: string;
        'text-transform'?: string;
        'line-height'?: string;
      };
      'strutfit-chat-bot-bubble': {
        id?: string;
        'background-color'?: string;
        border?: string;
        'border-color'?: string;
        'icon-color'?: string;
        disabled?: string;
      };
      'strutfit-fit-tip': {
        id?: string;
        'product-code': string;
        variant?: string;
        'show-icon'?: string;
        'font-family'?: string;
        'font-size'?: string;
        'background-color'?: string;
        border?: string;
        'border-color'?: string;
        color?: string;
        'icon-color'?: string;
        margin?: string;
        'margin-top'?: string;
        'margin-left'?: string;
        'margin-bottom'?: string;
        'margin-right'?: string;
        'text-transform'?: string;
        'line-height'?: string;
      };
      'strutfit-tryon-button': {
        id?: string;
        'product-code': string;
        'product-name'?: string;
        'product-image-url'?: string;
        variant?: string;
        'show-icon'?: string;
        'full-width'?: string;
        'font-family'?: string;
        'font-size'?: string;
        'font-weight'?: string;
        'background-color'?: string;
        border?: string;
        'border-color'?: string;
        color?: string;
        'icon-color'?: string;
        disabled?: string;
        margin?: string;
        'margin-top'?: string;
        'margin-left'?: string;
        'margin-bottom'?: string;
        'margin-right'?: string;
        'text-transform'?: string;
        'line-height'?: string;
      };
      'strutfit-size-chart-button': {
        id?: string;
        'product-code'?: string;
        variant?: string;
        'show-icon'?: string;
        'full-width'?: string;
        'font-family'?: string;
        'font-size'?: string;
        'font-weight'?: string;
        border?: string;
        'border-color'?: string;
        color?: string;
        'icon-color'?: string;
        disabled?: string;
        margin?: string;
        'margin-top'?: string;
        'margin-left'?: string;
        'margin-bottom'?: string;
        'margin-right'?: string;
        'text-transform'?: string;
        'line-height'?: string;
      };
    }
  }
}