How to load html file as string into React

I want to load content of a HTML file as string and use dangerouslySetInnerHTML to put it in a div of React component.

For example:

<!-- staticPages/pattern.html -->
<div>
    <div>
        ...
    <div>
</div>

// pattern.jsx
import React from 'react';
import html from 'statisPages/pattern.html'

export default function Pattern() {
  return (
    <div dangerouslySetInnerHtml={{ __html: html }}>
    </div>
  );
} 

I know I can export all HTML as string from a js file, but to do so I have to put HTML inside string literal and it's doesn't look pretty, I want to put it in a normal *.html file so others know it's a HTML.

Webpack has html-loader that can do this, I tested and it worked but it required to eject.

Does anybody have idea to do this, or to use html-loader without ejecting ?

Thank you.

[eddiemonge]

Why not just do it as JSX?

export default function html() {
  return (
    <div>
        <div>
            ...
        <div>
    </div>
  );
}

Or if you really need it as is, use an iframe?

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.