Economic Calendar Widget for React and Next.js

What you need

• A React or Next.js app
• The component below

Add the widget to React and Next.js

1. Create a widget componentAdd the component below. It renders the widget element and loads the script once for the whole app.
2. Set the options as attributesChange the data-fxmd attributes to pick the widget, currencies and theme. The options reference lists every attribute.
3. Render it where the widget belongsUse the component in any page or layout. It fills the width of its container.
4. DeployNo API key or server code is involved, so the component works in static exports and server-rendered apps alike.

Code for this platform

EconomicCalendar.jsx

import { useEffect } from "react";

const LOADER = "https://fxmacrodata.com/static/js/fxmacrodata-widget.js";

export default function EconomicCalendar() {
  useEffect(() => {
    if (window.FXMacroDataWidgets) {
      window.FXMacroDataWidgets.render();
    } else if (!document.querySelector(`script[src="${LOADER}"]`)) {
      const script = document.createElement("script");
      script.src = LOADER;
      script.async = true;
      document.body.appendChild(script);
    }
  }, []);

  return (
    <div
      data-fxmd-widget-type="economic-calendar"
      data-fxmd-currencies="USD,EUR,GBP"
      data-fxmd-theme="auto"
      data-fxmd-height="560"
    />
  );
}

Tips for React and Next.js

• In Next.js the widget is a client component. Add the use client directive at the top of the file when using the App Router.
• The script renders each element once. To change a widget's options later, render a new element, for example by giving the component a new key.

If something looks wrong

Other platforms