Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | 3x 3x 3x 3x 3x 3x 3x | import React from 'react';
import IFrame from '@uiw/react-iframe';
export interface RunWebProps extends React.IframeHTMLAttributes<HTMLIFrameElement> {
css?: string;
js?: string;
html?: string;
title?: string;
head?: React.ReactNode;
}
export default React.forwardRef<HTMLIFrameElement, RunWebProps>((props, ref) => {
const { html = '', css, js, title = 'Demo Title', head, ...other } = props;
const jsString = js ? `<script type="text/javascript">${js}</script>` : '';
const cssString = css ? `<style>${css}</style>` : '';
const result = `<!DOCTYPE html><html><head>${cssString}</head><body>${html}</body>${jsString}</html>`;
const blob = new Blob([result], { type: 'text/html' });
const url = URL.createObjectURL(blob);
return (
<IFrame
title={title}
head={head}
width="100%"
height="100%"
style={{ border: 0 }}
{...other}
ref={ref}
src={url}
mountTarget="#mountHere"
/>
);
});
|