[SOLVED] How to turn HTML widget code into NEXTjs code to use in an app (CoinMarketCap Price Marquee Ticker)

How to turn HTML widget code into NEXTjs code to use in an app (CoinMarketCap Price Marquee Ticker)

I'm trying to embed this CoinMarketCap Price Marquee Ticker Widget into my NEXTjs app and am having issues with this. I'll go through what I'm trying to do and walk through my process. Hopefully someone has maybe tried to do this and might have some suggestions.

Template Code:

Here is the code that is presented on the CoinMarketCap website, ideally for an HTML page: https://coinmarketcap.com/widget/price-marquee/

<script type="text/javascript" src="https://files.coinmarketcap.com/static/widget/coinMarquee.js"></script><div id="coinmarketcap-widget-marquee" coins="1,1027,825" currency="USD" theme="light" transparent="false" show-symbol-logo="true"></div>

This is an example of it working, but only in HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <script
      type="text/javascript"
      src="https://files.coinmarketcap.com/static/widget/coinMarquee.js"
    ></script>
  </head>
  <body>
    <h1>
      Cryptocurrency Ticker Slider
    </h1>
    <h3>Powered by: CoinMarketCap</h3>
    <div
      id="coinmarketcap-widget-marquee"
      coins="1,1027,825"
      currency="USD"
      theme="light"
      transparent="false"
      show-symbol-logo="true"
    ></div>
  </body>
</html>

❌ My Attempt #1:

I tried to create it as a separate div and import the script from off of next/script. However, I don't see anything in the window on my app when I save and load the app. I even added some styling, but I'm not seeing that the script is executing.

import type { NextPage } from 'next'
import Script from 'next/script'

const About: NextPage = () => {
return (
<div className="token-coin">
   <Script type="text/javascript" src="https://files.coinmarketcap.com/static/widget/coinMarquee.js" async></Script>
   <div className="coinmarketcap-widget-marquee" data-currency="oyster" data-base="USD" data-secondary="" data-ticker="true" data-rank="true" data-marketcap="true" data-volume="true" data-stats="USD" data-statsticker="false"></div>
</div>
  )
}

export default About

❌ Attempt #2:

This is what I thought would work, but I get this error on "coins" with NEXTjs, where it says the below and same as above, the script doesn't load into the widget div space: (JSX attribute) coins: string Type '{ id: string; coins: string; currency: string; theme: string; transparent: string; "show-symbol-logo": string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'. Property 'coins' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.

import type { NextPage } from 'next'
import Script from 'next/script'

const About: NextPage = () => {
return (
<Script type="text/javascript" src="https://files.coinmarketcap.com/static/widget/coinMarquee.js"></Script>
<div id="coinmarketcap-widget-marquee" coins="1,1027,825" currency="USD" theme="light" transparent="false" show-symbol-logo="true"></div>
  )
}

export default About

I would be super grateful for any help or guidance on how to add this widget from CoinMarketCap into my site!

Thanks so much!

Solution

When using Typescript and next.js you can edit your index.d.ts to include the attributes that the div is using:

declare module 'react' {
  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
    coins?:string;
    currency?:string;
    theme?:string;
    transparent?:string;
    tshow-symbol-logo?:string;
  }
}

As an alternative, if you are only using Javascript and React you can create the widget in the index.html and append it to a div when your React component mounts.

Codesandbox