Include html file in React

Asked: a year ago

If you want to include static html in ReactJS. You need to use html-loader plugin if you are using webpack to serve your react code.

First of all you need to install html-loader plugin. Open your terminal and run following command:

npm install --save-dev html-loader

Then open your webpack configuration file and add following code:

  modules: {
    loaders: [
      { test: /\.html$/, loader: 'html-loader' }

Now, in your react code do following changes:

var htmlContent = require('path/to/html/file.html');

// or you can also write
// import htmlContent from 'path/to/html/file.html');

export default function MyComponent() {
    return (
        <div dangerouslySetInnerHTML={ {__html: htmlContent} } />

That is it. Now you can use static html files to load your html files in react.

Viewed: 4983 times
Liked: 29 times