How to listen events in react/angular/vue from stencils components

Question

I have created simple one component in stencils.js and I used that in react/angular/vue. From my stencil component i have emit an event. This event is captured in angular/react/vue. My problem is I need to use the same component twice in a single html. How I can identify the which event is emitted by which component instance ?

Answer 1

Using @stencil/react-output-target library and following this guide you will be able to do this:

//button component
import { Component, Prop, h } from '@stencil/core';

@Component({
  tag: 'button-component',
  styleUrl: 'button.css',
  shadow: false,
  scoped: true
})
export class MyComponent {
  @Prop() label: string;

  render() {
    return <button type="button">{this.label}</button>;
  }
}

// button component instance in React
<ButtonComponent label='Test Button' onClick={() => alert("Hi, I'm a button alert!")}/>

Just found it after hours of trying to pass a function inside of Stencil component...