0

I am using ReactFlow in a component of my react app and the same I want to show in a pdf report(when generating from UI) as well . For a pdf I am creating a .html file on my machine locally by setting up static data and sending to BE and then they are replacing static data with dynamic values. In short, from UI prospective all I have to show the ReactFlow diagram/topology in a pdf report being generated from the .html file. So is there any way to use ReactFlow in html file?

Thanks in advance for any help.

I tried with

<script src="
https://cdn.jsdelivr.net/npm/react-flow-renderer@10.3.17/dist/umd/index.min.js
"></script>
<link href="
https://cdn.jsdelivr.net/npm/react-flow-renderer@10.3.17/dist/style.min.css
" rel="stylesheet">

in but unable to achieve result.

kuldeep kumar
  • 1

1 Answers1

0

If you want to use a React component (including those from libraries like ReactFlow) in an HTML file, you will have to include the React and ReactDOM scripts in your HTML, then use a script to render the component into a container in your HTML.

<body>
    <div id="root"></div>

    <!-- Include React and ReactDOM scripts -->
    <script src="https://unpkg.com/react/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>

    <!-- Include the ReactFlow script (this URL may need to be updated) -->
    <script src="https://unpkg.com/react-flow-renderer/dist/ReactFlow.js"></script>

    <script>
        // Elements for the flow
        var elements = [
            { id: '1', type: 'input', data: { label: 'Input Node' }, position: { x: 250, y: 5 } },
            // More nodes...
        ];

        // Use the global ReactFlow variable from the script
        var FlowComponent = ReactFlow.default;

        // Render the ReactFlow component into the root div
        ReactDOM.render(
            React.createElement(FlowComponent, { elements: elements }),
            document.getElementById('root')
        );
    </script>
</body>

This setup may still have issues due to the way ReactFlow handles its internal state, events, and context. It's generally recommended to use ReactFlow as part of a React project, as that's the environment it was designed for. Directly using it in HTML might lead to unexpected behavior or lack of functionality.

Mnai
  • 407
  • 3
  • 8
  • I already got this solution but the requirement is not to use React,ReactDOM in html file i.e. we don't have to run script – kuldeep kumar May 26 '23 at 07:22
  • You should have added that in your description then. I don't think there is any way to use a ReactFlow without React. ReactFlow is built with React – Mnai May 26 '23 at 07:32