How to inline a HTML file without using Webpack in React?

Question

I want to simply inline a HTML file in React by doing something like this :

import someFile from './aHtmlFile.html';

const Example = (props) => {
    return (
        <div dangerouslySetInnerHTML={ {__html: someFile} } />
    );
}

However, I don't want to install Webpack only because of this. Are there any other ways of doing this easily ?

You could save the HTML file as a string in a variable and and set it that way, instead of importing it. — Michael Abeln
– Michael Abeln, Commented Aug 19, 2022 at 19:37

ratzownal · Accepted Answer · 2022-08-19 19:51:19Z

1

You can load the file via fetch and save it into a state.

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

export const Example = (props) => {
  const [content, setContent] = useState("");

  useEffect(() => {
    fetch("./aHtmlFile.html").then((response) => {
      setContent(response.data);
    });
  }, []);

  return <div dangerouslySetInnerHTML={{ __html: content }} />;
};

answered Aug 19, 2022 at 19:51

ratzownal

2942 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1511956 Over a year ago

Ah, so I can actually fetch the file. Nice!

Collectives™ on Stack Overflow

How to inline a HTML file without using Webpack in React?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related