Not very clear

[VitoCrl]

Honestly man, the script is very nice, but I don't really understand how I can integrate your webcomponents with for example the health data server, I have in my index.html file (heart Data server directory) where my heart rate is written every second, how I can integrate your bang function for display the ecg monitor ?

[tripolskypetr]

Well, actually, quite simple. Call bang() on every incoming beat of heart. The provided callback is designed for a closure, inside which there can be an recursive interval with timeout and an ajax(fetch) request

Also, if you need an React interop, use the demo on JSFiddle

<!--script src="dist/ecg-webcomponent.js"></script-->

<div id="mount-point"></div>

<script>
  (function () {

    const {
      useRef,
      useEffect,
    } = React;

    const {
      createElement: h,
    } = React;

    const App = () => {

      const ref = useRef(null);

      useEffect(() => {
        const { current } = ref;
        current.innerHTML += '<ecg-line></ecg-line>';
        ecgLine((bang) => setInterval(() => bang(), 1000));
      }, []);

      return h("div", { ref });
    };

    ReactDOM.render(h(App), document.getElementById('mount-point'));

  })()
</script>

If you want to use this component with WebPack or other bundler, you need to place it's source in the global scope (window). This was discussed on StackOverflow here. Also you can code with React without any bundler, check the source code another tool here(english documentation will be published soon).

If this tool helps you, a your ⭐ will be appreciated)

[tripolskypetr]

ecgLine((bang) => {
  const handler = async () => {
    const data = await fetch('http://127.0.0.1/heart/wasBeat');
    const json = await data.json();
    if (json.wasBeat) {
      bang()
    }
    setTimeout(handler, 100);
  };
  handler();
});