Load htmlToReact component dynamically

This commit is contained in:
Marcus Blättermann 2023-01-24 22:43:37 +01:00
parent 6904e33453
commit 01b26d74cc
No known key found for this signature in database
GPG Key ID: A1E1F04008AC450D
2 changed files with 8 additions and 4 deletions

View File

@ -7,6 +7,6 @@ const htmlToReactParser = new HtmlToReactParser()
* @returns {Node} - The converted React elements.
*/
export default function htmlToReact(html) {
return htmlToReactParser.parse(html)
export default function HtmlToReact(props) {
return htmlToReactParser.parse(props.children)
}

View File

@ -5,8 +5,8 @@ import 'prismjs/components/prism-ini.min.js'
import { Quickstart } from '../components/quickstart'
import generator, { DATA as GENERATOR_DATA } from './quickstart-training-generator'
import htmlToReact from '../components/htmlToReact'
import models from '../../meta/languages.json'
import dynamic from 'next/dynamic'
const DEFAULT_LANG = 'en'
const DEFAULT_HARDWARE = 'cpu'
@ -70,6 +70,10 @@ const DATA = [
},
]
const HtmlToReactDynamic = dynamic(() => import('../components/htmlToReact'), {
loading: () => <></>,
})
export default function QuickstartTraining({ id, title, download = 'base_config.cfg' }) {
const [lang, setLang] = useState(DEFAULT_LANG)
const [_components, _setComponents] = useState([])
@ -134,7 +138,7 @@ export default function QuickstartTraining({ id, title, download = 'base_config.
small
codeLang="ini"
>
{htmlToReact(displayContent)}
<HtmlToReactDynamic>{displayContent}</HtmlToReactDynamic>
</Quickstart>
)
}