Add a Prop() String Value to Host Class

0
votes

I am new to StencilJS and JSX.

In my StencilJS component I have four props:

  • disabled:boolean
  • hasIcon:boolean
  • iconOnly:boolean
  • buttonType:string

In my render() function I have:

<Host class={{
        'btn': true,
        'disabled': this.disabled,
        'has-icon': this.hasIcon,
        'icon-only': this.iconOnly
      }}>

I would like to include the string prop called buttonType to the class but can find no documentation on how to accomplish this.

Any ideas?

1
jsxstenciljs

1 Answers

1
votes

You can wrap it in square brackets (a Computed property name):

<Host class={{
        'btn': true,
        'disabled': this.disabled,
        'has-icon': this.hasIcon,
        'icon-only': this.iconOnly,
        [this.buttonType]: true,
      }}>

You can also use a template literal, for example to add a prefix:

<Host class={{
        'btn': true,
        'disabled': this.disabled,
        'has-icon': this.hasIcon,
        'icon-only': this.iconOnly,
        [`type-${this.buttonType}`]: true,        
      }}>

Note that this is a standard JavaScript feature, not specific to Stencil or JSX.