How to use React component in vitepress

[ChaconneLuo]

How to use React component in vitepress？
I've added @vitejs/plugin-react in vite.config.ts, but it doesn't seem to render properly in markdown.

[akil-rails]

How to use React component in vitepress？

I've added @vitejs/plugin-react in vite.config.ts, but it doesn't seem to render properly in markdown.

Will be great to have an example in the docs - Evan says it's possible : https://twitter.com/youyuxi/status/1377414690997870592?lang=en

[brc-dd]

<div ref="el" />

<script setup>
import { createElement } from 'react'
import { createRoot } from 'react-dom/client'
import { ref, onMounted } from 'vue'
import FooBar from './FooBar'

const el = ref()
onMounted(() => {
  const root = createRoot(el.value)
  root.render(createElement(FooBar, {}, null))
})
</script>

https://stackblitz.com/edit/vite-dnqmyv

[franmc01]

In short, they are cracks. Thank you so much

[anuragxxd]

Hey @brc-dd, I am going through your example. I extended it a bit by using the external react library like shoelace here is the demo for the same https://stackblitz.com/edit/vite-khbbjq. While running the app in the dev with npm run docs:dev works fine but doesn't when the build is served. The error thrown is Uncaught TypeError: Cannot read properties of null (reading 'useRef')

Can you please help here!

[rohangupta-zomato]

Any way to use React with Typescript? Looks like vite bundler needs to do this, but I'm not sure how. BTW Any similar alternatives to Vitepress in React world? I really love the design and devex of Vitepress

[ChaconneLuo]

All you need to do is import react and react-dom and the corresponding type declarations, and you can use tsx, because they will all be converted to react.render() in bundler

[YakuBrangJa]

This is how I've been doing to document my react components.
You create root react app once per page and render the rest of the component with react portal to any part of your document.

page.md

// page.md

## Alert Dialog
<div ref="alertDialog" />

## Disabled Dialog
<div ref="disabled" />

<script setup>
import { ref, onMounted } from 'vue'
import {AlertDialog, DisabledDialog} from '../_components/demo/alertDialog-demo.tsx'
import {createReactApp, createPortalNode} from '../_components/createReactApp.ts'

const alertDialog = ref()
const disabled = ref()

onMounted(() => {

  createReactApp([
    createPortalNode(AlertDialog, alertDialog.value),
    createPortalNode(DisabledDialog, disabled.value, {isDisabled: true}),
  ])
  
})

</script>

createReactApp.ts

// createReactApp.ts

import React from 'react'
import {createRoot} from 'react-dom/client'
import {createPortal} from 'react-dom'


export const createReactApp = (children: React.ReactNode) => {
  const root = createRoot(document.createElement('div'))
  root.render(children)
}


export const createPortalNode = (component: React.FC, targetElement: Element, props: React.ComponentProps<any>) => {
  if(!targetElement) {
    console.warn('Target DOM node is not specified for Portal')
    return null
  }

  return createPortal(React.createElement(component, props), targetElement)
}