dangerouslySetInnerHTML dangerouslySetInnerHTML is a special react prop it overrides the innerHTML property of the DOM node and displays the passed HTML string
import { useRef, useState } from 'react'
import root from 'react-shadow'
import { Resizable } from 're-resizable'
export const ComponentFromHtmlString = ({ htmlString }) => {
const codeRef = useRef()
const [html, setHtml] = useState(htmlString ?? '<div>hello</div>')
return (
<>
<Resizable
enable={{
bottom: true
}}
defaultSize={{
width: 'inherit',
height: '300px'
}}
style={{
marginBottom: '10px'
}}
>
<pre
style={{
maxHeight: 'initial',
border: '3px dashed #68bbe1',
background: '#edfdff',
height: '100%',
cursor: 'text'
}}
onInput={() => {
setHtml(codeRef.current.textContent)
}}
>
<code
ref={codeRef}
className={'lang-html'}
contentEditable
style={{
outline: 'none'
}}
>
{htmlString}
</code>
</pre>
</Resizable>
<root.div>
<div dangerouslySetInnerHTML={{ __html: html }} />
</root.div>
</>
)
}