Using HOC with StencilJS

AnimatableComponents.tsx

import { Component, h } from '@stencil/core';
import { createAnimatableComponent } from '@proyecto26/animatable-component'

const HelloWorldButton = (props) => {
  const { iconName, ...rest } = props
  return (
    <ion-fab-button onClick={() => alert('Hello World')} {...rest}>
      <ion-icon name={iconName || 'home'} />
    </ion-fab-button>
  )
}

const AnimatableFirstButton = createAnimatableComponent(HelloWorldButton)
const AnimatableSecondButton = createAnimatableComponent(HelloWorldButton)

@Component(...)
export class PageHome {
  render() {
    <ion-content>
      <AnimatableFirstButton autoPlay animation="bounce" duration={700} iconName="send"></AnimatableFirstButton>
      <AnimatableSecondButton autoPlay animation="pulse" duration={400}></AnimatableSecondButton>
    </ion-content>
  }
}