Question 244021 in Html Question posted in
Some basic documentation can be found here.

how can i insert a standlone game project (html js) inside a react component?

I want to render a standlone html js project (game project) inside a react component.

standlone html js project portion code:

react component

export default function Tetris() {
  function iframe() {
    return {
      __html:
        '<iframe src="../../../Standlone Games/Tetris/index.html" width="540" height="450"></iframe>',
    };
  }

  return (
    <div>
      <div dangerouslySetInnerHTML={iframe()} />
    </div>
  );
}

result:

I have tried using dangerouslySetInnerHTML & iframe , but i receive a 404 (Not Found) error and an empty frame !
while the path is 100% correct!

result:

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thans to Mr. Polywhirl's idea , i just replaced the path to the absolute path and it works fine! Solution:

    const GAME_URL = "/src/Standlone Games/Tetris/index.html";

export default function Tetris() {
  return (
    <div>
      <iframe src={GAME_URL} width={540} height={600}></iframe>
    </div>
  );
}

  2. 0

    Why not render a native <iframe> element in the component?

    const { useState } = React;

const GAME_URL = "https://ceolter.github.io/tetris/";

const Tetris = () => {
  return (
    <div className="Tetris">
      <iframe
        src={GAME_URL}
        width={540}
        height={450}>
      </iframe>
    </div>
  );
};

const App = () => {
  return (
    <div className="App">
      <h1>Tetris</h1>
      <Tetris />
    </div>
  );
};

ReactDOM
  .createRoot(document.getElementById("root"))
  .render(<App title="Example using Hooks:" />);
    <div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search