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

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

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.

Tags:

2

Answers


  1. 0

    If you have offline HTML documentation that you want to include in your React application, you can embed it using an <iframe> element.

    • Place the HTML documentation files within your React project (for example, in the public directory or a dedicated folder).

    • Use the <iframe> element to display the HTML content in your React component.

    import React from 'react';

const DocumentationComponent = () => {
  return (
    <div>
      <h1>Documentation</h1>
      <p>Click the button below to view the documentation:</p>
      <button onClick={openDocumentation}>Open Documentation</button>
      <div id="documentationContainer"></div>
    </div>
  );
};

const openDocumentation = () => {
  const iframe = document.createElement('iframe');
  iframe.src = '/path/to/your/documentation.html'; // Replace with the actual path
  iframe.width = '100%';
  iframe.height = '600px'; // Adjust the height as needed
  iframe.style.border = 'none';
  document.getElementById('documentationContainer').appendChild(iframe);
};

export default DocumentationComponent;

    Something like this

    Login or Signup to reply.
  2. 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?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search