Guides
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;
};
}
}
}