Using custom html element in react

Viewed 204

I am using Typescript and REACT and I want to utilize and wrap some custom html elements in my TSX. For example, I am using a library with a customer html element called ch5-button an it is used in a vanilla html file as such

        <ch5-button class="shadow-pulse-button" type="default" shape="circle" label="" iconClass="fas fa-award">
        </ch5-button>

I did a ton of searching, but seems like i am not even smart enough to get the search correct to find how to do this. I am not even sure if I have the correct import statement to get those elements -- the closest I got was :

declare var CrComLib: typeof import('@crestron/ch5-crcomlib');
...
    const ch5Button = new CrComLib.Ch5Button();
    console.log("ch5Button");
    console.log(ch5Button);

The console.log display <ch5-button></ch5-button> soI have no idea if I am even on the right track to using this thing. The ch5Button is a class with a lot of methods that look pretty much like what an html element would have but I just dont know what to do with it and how to learn a method for using it. I found some sites that explain how to use observables and such but I am sketchy on if I am heading down the right path. I have attached am image of what some if the properties and methods of the ch5Button looks like in chrome debugger.

Can anyone point me in the right direction? I would create a REACT component that wraps this class and can use props to set the correct attributes etc.

I am very comfortable building REACT apps but admittedly, I am not an advanced developer with it yet but doing my best to learn.

enter image description here

0 Answers
Related