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. * @returns {Node} - The converted React elements.
*/ */
export default function htmlToReact(html) { export default function HtmlToReact(props) {
return htmlToReactParser.parse(html) return htmlToReactParser.parse(props.children)
} }

View File

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