keepthescore.co React component

Leaderboard.tsx

import { FC, useEffect, useState } from "react";

type LeaderboardProps = {
  boardToken: string;
};

const Leaderboard: FC<LeaderboardProps> = ({ boardToken }) => {
  const [height, setHeight] = useState("80px");
  const [isReady, setIsReady] = useState(false);

  useEffect(() => {
    const handleMessage = (event: MessageEvent<any>) => {
      if (event?.data?.board_token === boardToken)
        if (event.data.hasOwnProperty("frameHeight")) {
          setHeight(`${event.data.frameHeight}px`);
        }
    };
    window.addEventListener("message", handleMessage, false);
    setIsReady(true);

    return () => {
      window.removeEventListener("message", handleMessage);
    };
  }, [boardToken]);

  if (!isReady) {
    return null;
  }

  return (
    <iframe
      title="leaderboard"
      id={`iframe-${boardToken}`}
      src={`https://keepthescore.co/embed/${boardToken}/`}
      style={{ width: "100%", border: "none", height, overflowX: "hidden" }}
    />
  );
};

export default Leaderboard;