Is it possible to render a HTML document that has CSS/JS inside of my React app?

Question

To be more specific I have a react application that will not be able to be online that will have documentation available on it.

The documentation unfortunately is either only available through their websites or for download in html format instead of pdf.

https://docs.zeek.org/en/master/

other documentation is multiple html files.

I'm not sure iframe method would work in this scenario but am struggling to find solutions to my issue.

if not possible would it be possible to simply open up the application in a new tab upon clicking a button in the react app.

In this post you can get multiple solutions stackoverflow.com/questions/40108843/… — javiern8410
– javiern8410, Commented Oct 13, 2023 at 17:30

javiern8410 · Accepted Answer · 2023-10-13 17:37:10Z

0

You can get multiples solutions in thats link

Example:

Add html loader to your project:

npm i -D html-loader

Add the following rule to your webpack.config file:

{
  test: /\.(html)$/,
  use: {
    loader: 'html-loader',
    options: {
      attrs: [':data-src']
    }
  }
}

Import your html file:

import React, { Component } from 'react';
import Page from './test.html';
var htmlDoc = {__html: Page};

export default class Doc extends Component {
  constructor(props){
    super(props);
  }

  render(){
     return (<div dangerouslySetInnerHTML={htmlDoc} />)
}}

Link

React: how to load and render external html file?

answered Oct 13, 2023 at 17:37

javiern8410

172 bronze badges

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

Collectives™ on Stack Overflow

Is it possible to render a HTML document that has CSS/JS inside of my React app?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related