How to add widget in react component

October 30, 2022

I wouldike to add this this widget (source : https://www.npmjs.com/package/@layerzerolabs/aptos-bridge-widget) :

<script
  src="https://unpkg.com/@layerzerolabs/aptos-bridge-widget@latest/element.js"
  defer
  integrity="sha384-${checksum}"
  async
></script>
<link
  rel="stylesheet"
  href="https://unpkg.com/@layerzerolabs/aptos-bridge-widget@latest/element.css"
/>
<aptos-bridge />

in my component react : src/pages/home/index.tsx :

return (
    <>
<Root>
        <IconContainer>
          <img width="500" height="500px" src={logo} />
        </IconContainer>
        <aptos-bridge />
      </Root>
    </>

But they show me always the same error : Property 'aptos-bridge' does not exist on type 'JSX.IntrinsicElements'. TS2339

I already tried to put the <script> & <link> in the index.html but when I put the aptos-bridge balise on my react component same error.

>Solution :

Just insert all the widget’s requirements into the dangerouslySetInnerHTML property of a JSX-element.

Try the following:

<div dangerouslySetInnerHTML={{__html: data}} />

Where data is a string containing:

`<script src="https://unpkg.com/@layerzerolabs/aptos-bridge-widget@latest/element.js" defer integrity="sha384-${checksum}" async></script>
<link rel="stylesheet" href="https://unpkg.com/@layerzerolabs/aptos-bridge-widget@latest/element.css" />
<aptos-bridge />`