React component to render raw HTML without explicitly setting innerHTML property.
npm install react-typescript-raw-htmlSimply:
``typescript jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { HTMLComponent } from 'react-raw-html';
const html =
;
const container = document.querySelector('#container');ReactDOM.render(, container);
`Why?
Because sometimes it is entirely correct to use the server-side rendering to generate pure HTML without any React at all (think Python libraries like [Plotly] or [Bokeh], for example). But the output of these libraries, when used directly in React app, forces one to jump through hoops just to render it somehow with all those inline scripts, and even more - to render it correctly and efficiently. This package is intended to incapsulate these "hoops" inside it.
How?
The approach is fairly simple:
- insert the raw HTML string into DOM object (for example,
);
- traverse the children of this object;
- convert each child into React element.$3
Well, there were two main caveats:
- we have to manually convert DOM properties to React ones;
- and what is sometimes more important: the scripts, when inserted by React